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autorise mais, bien sur, une fois ses devoirs faits. 
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Voici un moment bien choisi pour devenir un developpeur dejeux Flash. A ujourd'hui, il n'existepas 
de meilleur outil de devel oppement pour lesjeux de petite et de moyenne taille. 

Flash CS3 Professional (aussi appele Flash 9) est rapide, puissant et tres simple d'usage pour les 
proj ets de devel oppement. L a cl e de ce succes ti ent a A cti onScri pt 3.0, 1' excel I ent nouveau I angage de 
programmation livre dans la derni ere version de Flash. 

ActionScript 1.0 et 2.0 se sont souvent revel es frustrants pour les developpeurs dejeux. lis n'etaient 
pasassez rapides pour la realisation des taches essenti el I es, etd'etrangesboguesoudescomportements 
inattendus venaient souvent compliquer la production. 

ActionScript 3.0 est d'un tout autre acabit. II permet de developper des programmes rapidement et 
sans effort. Tout fonctionne et fonctionne bien. La vitesse d' A ctionScri pt 3.0 permet en outre 
d'implementer des solutions exactement comme on les a imaginees. 

Ce livre doit devenir votre guide pour le devel oppement des jeux Flash.J'esperequevousapprecierez 
autant d'apprendre en lisant ces pages que j'ai pris plaisir a les ecrire. 



Flash et le developpement de jeux 

En octobre 1995, j'etais tres excite par mon avenir en tant que developpeur de jeux. M acromedia 
venait de lancer Shockwave et je decouvrais qu'il s'agissait d'un moyen de developper des jeux que 
je pourrais distribuer moi-meme sur leWeb. 
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Je n'ai retrouve un tel sentiment d'excitation concernant le developpement des jeux que deux fois 
depuis la sortie du premier Shockwave. La premiere fut a la sortie de Shockwave 3D. Laseconde, lors 
dela sortie d'ActionScript 3.0. 

Cela fait un certain temps que les jeux Flash ontfait leur entree sur le devant de la scene, mais ils n'y 
ont jamais figure que comme une sorte de succedane des jeux Shockwave. Shockwave etait plus 
rapide, plus puissant et proposait meme des fonctionnalites 3D. 

Avec ActionScript 3.0, Flash atteint la puissance de Shockwave et la depasse meme sur certains 
points. Par exemple, le lecteur Flash 9 est deja disponible sur 80 % des ordinateurs qui surfent sur le 
Web. D'ici a ce que vous lisiez ce livre, la plupart des lecteurs Flash 8 auront ete mis a jour avec la 
version 9 et nous nous rapprocherons d'un taux effectif de 100 %. Le fait de savoir que Flash 9 est 
presque aussi repandu que les navigateurs Web eux-memes ouvre une tout autre dimension pour les 
developpeursdejeux Flash. 

Flash 9 s' execute meme sur les ordinateurs Linux. Lesanciennes versions de Flash s'executent sur les 
consoles deTV Web, les consoles dejeu comme la Wii et meme les peripheriques portables tels que 
les smartphones ou la PlayStation Portable. Le lecteur Flash 9 et ActionScript 3.0 finiront d'ailleurs 
par etre disponibles sur ces types de peripheriques egalement. 

Vous pouvez developper des versions autonomes ou des versions Web de vos jeux avec Flash. Des 
logiciels tiers vous permettent d'etendre les jeux autonomes afin de les transformer en de veritables 
applications. 

Flash constitue avec ActionScript 3.0 un excellent moyen de creer des jeux de petite etde moyenne 
tail le. 



A qui ce livre est-il destine ? 

Ce livre est destine a tous ceux qui utilisent Flash pour developper des jeux. Tous les developpeurs 
n'utiliseront cependant pas ce livre de la meme maniere. 

Ceux qui debutent avec Flash et la programmation pourront en faire leur seconde etape apres une 
premiere familiarisation avec les notions de base de la programmation. Un debutant motive peut 
utiliser ce livre pour apprendre le langage ActionScript 3.0 de toutes pieces. 

Si vous possedez deja une experience en programmation avec ActionScript 1.0 ou 2.0, vous pourrez 
utiliser ce livre pour vous mettre a la page avec ActionScript 3.0. 

II est neanmoins preferable d'oublier I'essentiel de ce que vous avez appris avec les precedentes 
versions du langage. ActionScript 3.0 est considerablement different. J econsidere meme pour ma part 
qu'il s'agit d'un langage de programmation entierement nouveau. 

Bon nombred'utilisateurs Flash connaissentdeja les rudiments del 'animation etde la programmation 
mais souhaitent maintenant developper des jeux. Voici le premier public cible par ce livre. 
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Si vous etes non pas programmeur mais concepteur, i 1 1 ustrateur ou ani mateur, vous pourrez uti I iser I es 
exemples de ce livre comme structure pour vos propres jeux. Autrement dit, vous pourrez vous 
contenter de remplacer les graphismes dans les fichiers source d'exemple. 

De la meme maniere, si vous etes deja un programmeur A ctionScript 3.0 averti, vous decouvrirez 
dans ce livre une bibl iotheque de code dans laquel le vous pourrez puiser pour vos propres jeux. I nuti le 
de reinventer la roue. 



Que vous faut-il pour utiliser ce livre ? 

La plupart des lecteurs devront avoir une experience prealable dans I ' uti I i sati on de Flash et en 
programmation pour tirer le meilleur parti de ce livre. Vous devrez aussi posseder les bons outils. 

Connaissances requises 

Les lecteurs doivent etre familiarises avec I'environnement de Flash CS3. Si vous decouvrez Flash, 
commencez par parcourir le Guide de I ' uti lisateur Flash livre avec le logiciel. Dans Flash, choisissez 
Aide >A ide Flash ou appuyez sur Fl. II peut aussi etre utile dese procurer un livre pour les debutants 
ou de consulter des didacticiels en ligne. 

Ce livre n'est pas destine aux programmeurs debutants, a moins que vous ne cherchiez a utiliser les 
exemples en y inserant vos propres graphismes. Vous devez done deja avoir une certaine experience 
en programmation, que ce soit avec A ctionScript 1.0, 2.0 ou 3.0, JavaScript, Java, Lingo, Perl, PHP, 
C++ ou n'importe quel autre langage de programmation structure. A ctionScript 3.0 n'est pas difficile 
a comprendre si vous avez I'habitude des boucles, des instructions conditionnelles et des fonctions. 
Le Chapitre 1 propose meme une introduction a la syntaxe de base d' A ctionScript 3.0. 

Si vous etes programmeur mais que vous n'ayez jamais utilise Flash auparavant, lisez les parties du 
Guide de I ' uti I i sateur qui concernent I ' i interface Flash et les techniques de dessin et d'animation 
elementaires. 

Applications logicielles 

Vous aurez evidemment besoin de Flash CS3 Professional ou d'une version ulterieure. Flash 8 Studio, 
la precedente version de Flash, n' utilise pas A ctionScript 3.0 et ne peut done etre uti Usee avec ce livre. 

Flash CS3 est vi rtuel lement identique sur M ac et sous Windows. Les captures d'ecran de ce livre, 
qu'elles proviennent de la version M ac ou Windows de Flash, devraient done ressembler en tous 
poi nts a ce que vous obti endrez sur votre propre ordi nateur. 

Les futures versions de Flash continueront selon toute vraisemblance a utiliser ActionScript 3.0 
comme langage de programmation principal. Certains des choix de menu et des raccourcis clavier 
pourraient changer, mais vous devriez malgre tout pouvoir utiliser ce livre. II peut etre utile dans ce 
cas de regler vos parametres de publication en selectionnant le lecteur Flash 9 etA ctionScript 3.0 pour 
assurer une compati bi I ite maximale. 
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Fichiers source 

Vous aurez egalement besoin des fichiers source de ce livre. Consultez la fin de I 'introduction pour 
plus d' informations sur la maniere de les acquerir. 

Utiliser les jeux d'exemple dans vos propres projets 

Ce livre inclut seize jeux complets, dont de petits bijoux comme M atch Three, un jeu de plate-forme 
defilantetunjeu demotsmeles. On me pose souvent la question : "Est-cequejepeux utilisercesjeux 
dansmon projet?" 

La reponse est oui, pour autant que vous les modifiiez afin de vous les approprier, par exemple en 
adaptant les graphismes, en changeant les modalites de jeu ou en modifiant d'autres elements du 
contenu. Ne postez pas les jeux en I'etat sur votre site Web. II n'est pas non plus tolere que vous 
publiiez le code source ou les listings du code de ce livre afin de les mettre a la disposition du 
public. 

Lorsque vous utiliserez ces jeux dans vos projets, nefaites pas comme s'il s'agissait entierement de 
votre propre travail. Ceneserait pas prof essionnel. M erci dementionner celivreen proposantun lien 
vers http://flashgamaj.com. 

En revanche, si vous n'utilisez qu'une petite portion decodeou si vous utilisez un jeu comme structure 
de base pour I'elaboration d'un jeu completement different, il n'est pas necessaire d'ajouter de 
mention particuliere. Tout n'est final ementqu'affai re debon sensetdecourtoisie.Jevousen remercie 
d'avance. 



Ce que vous trouverez dans ce livre 

Le Chapitrel, "Utiliser Flash et ActionScript 3.0", introduit ActionScript 3.0 et certains concepts 
elementaires comme les strategies de programmation de jeux et une check-list pour vous aider a 
developper vos jeux avec Flash CS3. 

Le Chapitre 2, "Elements de jeu ActionScript", presente une serie de courts fragments de code et de 
f oncti ons permettant par exempl e de creer des champs texte, de dessi ner des formes et de I i re des sons. 
II s'agit d'une bibl iotheque de code utile et pratique que nous utiliserons dans le reste du livre et que 
vous pourrez utiliser dans vos propres projets. 

Les Chapitres 3 a 12 contiennent chacun un ou plusieurs jeux complets. Le texte des chapitres vous 
guide lors du developpement du code du jeu, en vous permettant de le reproduire par vous-meme si 
vous le souhaitez. Vous pouvez aussi utiliser les fichiers source et en consulter directement le code 
final. 
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Le C hapitre 3, "Structure de jeu elemental re : un jeu de M emory", est un peu different du reste du 
livre. Au lieu d'examiner le code d'un jeu fini, il construit le jeu en dix etapes, en produisant une 
animation Flash etunfichier decode source a chaqueetape. II s' agit d'un excel lent moyen d'apprendre 
aconstruiredesjeux Flash. 

L'essentiel du reste des chapitres introduit un sujet special avant de commencer un nouveau jeu. Par 
exemple, le C hapitre 4 commence par une section "Tableaux et objets de donnees". 

Le contenu de ce livre ne se limite pas aux pages que vous tenez entre vos mains. II reste bien des 
chosesadecouvriren ligne. 



Le site Web FlashGameU.com 

Le site FlashGameU.com est le site Web d'accompagnement de ce livre (en anglais). Vous pouvez 
vous y rendre pour trouver les fichiers source, les mises a jour, le nouveau contenu, un forum de 
developpementdejeux Flash et, enfin, mon blog etmon podcastconsacres au developpementdejeux 
avec Flash. 

Les fichiers source du livre sont organises par chapitre puis divises en archives pour chaquejeu. Un 
lien est propose pour telecharger les fichiers dans la page principale de FlashGamell.com. 

Sur le site FlashGameU.com, vous trouverez egalement un blog (en anglais) sur lequel je poste le 
nouveau contenu ettentederepondreaux questions des I ecteurs. Si vousavez unequestion concernant 
ce livre ou ledeveloppement desjeux Flash en general, posez-la sur le forum ou directement sur mon 
blog. A tres bientot ! 



Utiliser Flash et 
ActionScript 3.0 

Au sommaire de ce chapitre 

• Qu'est-ce qu'A ctionScript 3.0 ? 

• Creer un programmeActionScript simple 

• Travailler avec Flash CS3 

• Ecri re et editer du code A ctionScript 

• Strategies de programmation dejeux ActionScript 

• C oncepts A ctionScri pt elementai res 

• Test et debogage 

• Publier votrejeu 

• Check-list de programmation desjeux ActionScript 
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ActionScript est un langage de programmation parfaitement adapte a la creation dejeux. II est facile 
a apprendre, rapide a developper et tres puissant. 

Nous commencerons par examiner ActionScript 3.0 et I'environnement de creation Flash CS3. 
Ensuite, nous construirons quelques programmes tres simples afin de nous familiariser avec cette 
nouvel I e version d'ActionScript. 



Qu'est-ce qu'ActionScript 3.0 ? 

ActionScript 3.0 a ete introduit en 2006 a la sortie de Flex 2. Comme Flash, Flex permet aux 
developpeurs de creer des applications qui utilisent le lecteur Flash Player. Flash propose cependant 
pour le developpement des applications une interface plus visuelle qui convient parti culierement 
mieux au developpement des jeux. 

ActionScript a ete introduit en 1996 a la sortie de Flash 4. Le langage ne s'appelait pas encore 
ActionScriptet il n'etait pas encore possible de taper du code. II fallait choi sir des instructions parmi 
une serie de menus deroulants. 

E n 2000, Flash 5 a considerablementameliore les chosesgraceal' introduction formel I e d'ActionScript 
1.0. Ce langage de script incluait tous les elements dernier cri des autres langages de developpement 
Web, comme le Lingo du logiciel Director de M acromedia et le J ava de Sun. II etait cependant tres 
I i mite en termes de vitesse et de puissance. 

Flash MX 2004, aussi appele Flash 7, introduisit A ctionScript 2.0, une version bien plus puissantedu 
langage qui facilitait la creation de programmes orientes objet. Cette mouture s'apparentait plus a 
ECMA Script, un standard des langages de programmation developpe par I'European Computer 
M anufacturers Association. JavaScript, le langage de programmation utilise dans les navigateurs, est 
egalement elabore a partir d'ECM A Script. 



Le lecteur F lash Player 9 integre deux interpreteurs de code separes. Le premier est destine 
au contenu plusancien etinterprete I e code ActionScript 1.0/2.0. Le second est uni nterpreteur 
plus rapide qui fonctionne avec ActionScript 3.0. Vous obtiendrez de meilleures performances 
dans vos jeux si vous n'utilisez que du code ActionScript 3.0. 



A ctionScript 3.0 est I'aboutissement de longues annees de developpement. A chaque nouvelle version 
du programme Flash, les developpeurs lui ont fait atteindre de nouvel les I i mites. La derniere version 
a cejour ti entcompte del 'usage que les developpeurs font de Flash aujourd'hui etcorrige les fai blesses 
de la precedente variante du langage. 
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Nousdisposons maintenantd'un excellent environnement dedeveloppement pour la creation desjeux 
en deux dimensions. Vous verrez que I'une de ses principales forces tient a sa capacite a elaborer des 
jeux parfaitement operationnels avec tres peu de code. 



Flash CS3 Professional correspond en fait a Flash 9. Adobe a regroupe ensemble les 
versions de differents composants logiciels comme Flash, Photoshop, Illustrator et 
Dreamweaver dans la solution "C S3" . Le numero de version technique de Flash dans 
CS3 est F lash 9. On peut done aussi bien faire reference a F lash 9 qu'a F lash CS3. 
Le moteur de lecture qui est egalement utilise par Flex est quant a lui appele Flash Player 9 
uniquement. 



Creer un programme ActionScript simple 



Codes sources 

http://flashgameu.com 
A3GPU01_HelloWorld.zip 



Lors de I' introduction d'un nouveau langage de programmation, la tradition veut que Ton commence 
par des programmes Hello World. L'idee consiste a ecrire un programme simple qui se contente 
d'afficher les mots Hello World a I'ecran. 



Le programme Hello World remonte a 1974, lorsqu'il fut inclus dans un document didactici el 
interne de Bell Labs. C'est le premier programme que j'ai appris a programmer en m'instal- 
lant devant un terminal PDP-11 a I'ecole a I a fin des annees 1970. Presque tous les livres de 
programmation pour debutants commencent par un exemple H el I o World. 



Utilisation simple de trace 

Une version simpledu programme Hello World peut etre creee en utilisant la fonction trace dansun 
script du scenario principal, trace se contente d'afficher du textedans le panneau Sortie de Flash. 

Pour creer une nouvelle animation Flash, choisissez Fichier > Nouveau dans la barre des menus. La 
fenetre N ouveau document apparait (voir Figure 1.1). 
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Figure 1.1 

Choisissez Fichier Flash 
(AS 3.0) pour creer une 
nouvelle animation Flash. 




richer Hash (AS 3 .0) 



ft Fichier Flash (AS 2.0) 

ft Fichier Flash (Mobile) 

ft Diaporama Flash 

ft Application de formuiaires Flash 

tff Fichier ActionScript 

Rchier de communication AS 
Fichier Flash JavaScript 
Projet Flash 



Creez un nouveau document Flash (*.fla) dans la fenetre 
de document Flash . Les Parametres de publication seront 
definis pour ActionScript 3.0. Utilisez les documents Flash 
pour configurer le support et la structure des animations et 
applications Flash, 



Lorsque vous cliquez sur le bouton OK, vous accedez a une nouvelle animation Flash intitulee Sans 
nom-1. Cette animation s'affiche sous la forme d'une fenetre Document Flash (voir Figure 1.2). 



Figure 1.2 

La fenetre Document Flash 
inclut un scenario et une 
zone de travail de scene. 
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La partiesuperieuredelafenetreDocumentinclutun scenario, avec desi mages dont la premiere porte 
le numero 1 et qui s'etendentvers la droite. La Figure 1.2 en revel eun peu plus de 65, maisce nombre 
depend de la taille de la fenetre. Le nombre d' images peut etre aussi important que le requiert 
I'animateur mais, pour la programmation de nos jeux, nous n'en utiliserons generalement que 
quelques-unes. 

Le scenario peut contenir un ou plusieurs caiques. Par defaut, il n'en existe qu'un, nomme Caique 1 
dans la fenetre Document. 

Dans leCalque 1 apparait une unique image-cle representee par un rectangle marque d'un petit cercle 
sous le numero d'image 1. 



Leterme image-cle est un terme d' animation. Si nous nous occupions d'animer des elements 
dans F lash au lieu de les programmer, nous ne cesser ions d' utiliser des images-cles. L' Image- 
cle designe un point du scenario ou les positions d'un ou de plusieurs des elements animes 
sont fixees de maniere specifique. Entre les images-cles, les elements changent de position. 
Par exemple, si une image-cle a I'image 1 contient un element a gauche de I'ecran et une 
autre a I'image 9 contient le meme element a droite de I'ecran, vous verrez I'element au 
milieu de I'ecran entre ces images-cles, a I'image 5. 

Nous n'utiliserons pas d'image-cle pour creer des animations mais le ferons pour placer des 
elements a I'ecran dans differents modes : Intro, Jeu ou Fin de parti e. 




Vous pouvez placer un script dans n'importe quelle image-cle de n'importe quel caique du scenario. 
Pour eel a, selectionnez I'image-cle, choisissez lemenu Fenetre etselectionnez Actions. 

Le panneau Actions s'affiche (voir Figure 1.3). II est possible qu'il possede une autre apparence sur 
votre ecran, car il peut etre personnalisedenombreusesmanieres, notammenten affichantun ensemble 
complet de commandes et defonctions ActionScript dans un menu a gauche. 

Le panneau Actions est une simple fenetre de saisie de texte. II est cependant capable de bien des 
choses et peut par exemple vous aider a formater votre code. Nous n'utiliserons pas souvent ce 
panneau dans ce livre, car I'essentiel de notre code sera place dans des classes externes. 

Pour creer ce simple programme Hello World, tapez le texte suivant dans le panneau Actions : 

trace ( "Hello World" ) ; 

Voila tout. Vous venez de creer votre premier programme ActionScript 3.0. Pour le tester, choisissez 
Controle >Tester I'animation ou tapez le raccourci Ctrl +Entree. Si vous n'avez pas vous-meme cree 
I'animation, ouvrez HelloWorldl.fla et utilisez cefichier pour letest. 

A present, examinez lepanneau Sortie. Celui-ci s'affichememes'il etaitauparavantferme. Commeil 
est souvent petit, il se peut toutefois qu'il apparaisse dans un coin de I'ecran sans que vous ne le 
remarquiez. La Figure 1.4 montre a quoi il devrait ressembler a present. 
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Figure 1.3 

Le panneau Actions peut aussi 
etre affiche a I' aide du raccourci 
clavier [a¥]+ IF9 1 (Windows) 
ou |Ajf|+|F9 |(Mac). 
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Figure 1.4 

Le panneau Sortie presente 
le resultat de I'appel dela 

fonction trace. 




Si ce programme Hello World a techniquement pour effet d'afficher la chame "Hello World", il ne le 
fait que lorsque vous testez I'animation dans Flash 9. Si vous incorporiez cette animation dans un 
navigateur, vous ne verriez rien a I'ecran. Quelques efforts supplemental res sont ainsi necessaires 
pour creer un veritable programme Hello World. 

Creer une sortie ecran 

Pour que les mots Hello World s'affichent a I'ecran, il nous faut plus d'une ligne de code. En real ite, 
il en fauttrois. 

La premiere creera une nouvelle zone de texte a afficher a I'ecran que Ton appelle un champ texte. 
II s'agit d'un conteneur pour du texte. 

La deuxieme ligne placera les mots Hello World dans ce champ texte. 

Latroisiemeajoutera ce champ a la scene. L a scene est la zone d'affichagedes animations Flash. Vous 
pouvez disposer les elements dans la scene pendant que vous creez une animation. A la lecture de 
I'animation, c'est la scene que voit I ' uti I isateur. 
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Avec ActionScript 3.0, lefait de creer des objets tels qu'un champ texte ne les ajoute pas a la scene. 
Cette operation doit etre effectuee par vos soins. Ce principe de fonctionnement se revel era utile par 
la suite lorsque vous souhaiterez regrouper des objets sans les placer tous directement sur la scene. 



Dans ActionScript 3.0, tous les elements visuels correspondent a des types d'objets 
d'affichage. II peut s'agir de champs texte, d'elements graphlques, de boutons ou meme de 
composants d'interface uti I i sateur (par exemple des menus deroulants). Les objets d'affi- 
chage peuvent egalement etre des collections d'autres objets d'affichage. Par exemple, un 
objet d'affichage peut contenir toutes les pieces d'un jeu d'echecs et I'echiquier, figurer dans 
un autre objet d'affichage situe en dessous. La scene elle-meme est un objet d'affichage ; il 
s'agit en fait d'un objet d'affichage appele clip. 



Voici les trois lignes de code de notre nouveau programme Hello World. E lies remplacent la ligne de 
codede I'image 1 du scenario de I 'exemple precedent : 

var myText : TextFieid = new TextField( ) ; 
myText.text = "Hello World"; 
addChild ( myText ) ; 

Le code cree une variable nominee myText de type TextFieid. II attribue ensuite la valeur "Heiio 
world" a la proprietetext de ce champ texte avantdel'aj outer comme enfant a I'objet d'affichage qui 
correspond a la scene. 



Le mot-cle var avant la premiere utilisation de la variable myText indique au compilateur que 
nous allons creer une variable nommee myText. Le signe deux points et le type TextFieid indi- 
quentau compilateur I e type de valeur que cette variable contlendra (dans lecas present, une 
reference a un champ texte). 



Ce programme produit un tout petit "H el I o World" dans la police serif par defaut tout en haut a gauche 
de I'ecran. Choisissez Control e >Tester I' animation pour I e verifier par vous-meme. Lefichier source 
est HelloWorld2.fla. La Figure 1.5 presente le champ texte que nous venons de creer. 

Le texte apparait en haut a gauche et s'affiche avec cette police particul iere parce que nous n'avons 
defini aucune autre propriete du champ texte. Lorsque nous en aurons appris un peu plus, nous 
pourronschoisirl'emplacementdu texte, sa tail le et sa police. 
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Figure 1.5 

L'ecran affiche un petit "Hello 
World" en haut a qauche. 



■ft HelloWorld2.swf 



HeUo World 



Fichier Affichage Contrdle Deboguer 



Notre premiere classe ActionScript 3.0 

N ousn'utiliserons pas de script dans le scenario a moins que nous n'ayonsquelque chose despecifique 
a realiser dans une image donneedu scenario. Pour I ' essenti el , notrecodese trouvera place dans des 
fichiers de classe A ctionScri pt externe. 

Recreons done notre programme H el I o World sous forme de classe externe. 



Le terme classe est un autre moyen de fa i re reference a un objet F lash, que ce soit un element 
graphique ou I'animation elle-meme. Nous ferons aussi souvent reference a des classes pour 
designer la portion de code d'un objet. Vous aurez ainsi une animation et la classe de cette 
animation. Cette derniere definira les donneesassocieesa I'animation et les fonctions qu'el le 
sera susceptible de realiser. 




Pour creer un fichier ActionScript externe, choisissez Fichier> Nouveau et selectionnez Fichier 
ActionScript. U ne nouvellefenetre Document ActionScript s'ouvre et vient occuper le meme espace 
que la fenetre Document de I'animation Flash. A u lieu d'un scenario etd'une scene, seuleunegrande 
zone d'edition de texte apparait (voir Figure 1.6). 
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Figure 1.6 

Le document ActionScript 
contient un programme 
Hello World tres simple. 
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HelloWorlcG.fla | HeiioWorld3.as | 

,0 vl ^BP noTPPP IB 

I/* This code is from "ActionScripc 3.0 Game Program 
Copyright 2007 
hccp : / / f lashgameu . com 

5ee che book or sice for more mfonnacion */ 

I package ( 

import f la3h . display . * ; 
import f la3h . text . * ; 

public class HelloWorld3 extends HovieClip { 

public function HelloWorld3 | ) { 

var myText:TexcField = new TexcField(); 
myTexc.text = "Hello World!"; 
addChild (rayTexc) ; 

I 



Cble : | HdoWorkB.fb ■»■] ® 

ty" by Gary Rosenzweig » 
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Commevous pouvez le voir a la Figure 1.6, ce programme est bien plus long queleprogrammeHello 
World detrois lignes que nous avons cree precedemment. Voyons ce que realise chacune des parties 
du code. 

L e fichier de cl asse commence par decl arer qu' i I s' agit d' un paquetage contenant une classe. E nsuite, 
il definit les parties d'ActionScript requises dans le programme. Dans le cas present, nous devons 
afficher des objets sur la scene et creer un champ texte. Pour cela, nous devons utiliser les classes 

flash . display et flash . text : 
package { 

import flash. display.*; 
import flash. text.*; 



Vous apprendrez rapidement quel les classes de bibliotheque vous devez importer au debut de 
vos programmes. II ne s'agit la que de deux des bibliotheques parmi la multitude que nous 
utiliserons dans ce livre. Pour les fonctions ActionScript plus inhabituelles, vous pourrez 
toujours examiner I 'entree de la fonction correspondante dans I'Aide F lash 9 afin de voir 
quelle bibliotheque de classes importer. 
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La I ignede code suivante correspond a la definition de la classe. Ici.il doits'agird'uneclasse publique, 
ce qui signifie qu'il est possible d'y acceder depuis I'animation principale. Le nom de la classe sera 
Heiioworid3, ce qui doit correspondre au nom du fichier, qui est HelloWorld3.as. 

Cette classe etend wiovieciip, cequi signifie qu'elle fonctionnera avec un clip (dans lecas present, la 
sceneelle-meme) : 

public class HelloWorld3 extends MovieClip { 

La classe contient une unique fonction, Heiioworid3, dont le nom correspond precisement a celui de 
la classe. Lorsqu'une fonction porte le meme nom que la classe, el I e est executes immediatement 
quand la classe est initialisee. On appelle cette fonction la fonction constructeur. 

Dans lecas present, la cl asse est attaches a I'animation, desortequ'el les' execute des que I 'animation 
est initialisee. Dans la fonction se trouvent les trois memes lignes de code que nous avons utilisees 
dans I'exemple precedent : 

public function HelloWorld3( ) { 

var myText :TextField = new TextField(); 
myText.text = "Hello World!"; 
addChild (myText) ; 

} 

} 

} 

Pour quececodefonctionnedansune animation, vousdevez creer une nouvelle animation. L'exemple 
est appele HelloWorlcB.fla Cette animation n'a rien besoin d'incluredans le scenario, mais el I e doit 
se voir associer une classe de document. Celle-ci indique le fichier ActionScript qui controle 
I'animation. 

Pourdefiniruneclassededocument, ouvrez lepanneau Proprietesen choisissantFenetre >Proprietes > 
Proprietes. Flash affiche le panneau presents a la Figure 1.7. Ensuite, tapez le nom de classe 
Heiioworid3 dans le champ C lasse du document. 



Figure 1.7 

La classe du document 
de cette animation est 
HelloWorld3. 



: Fiupnetes ■ | Filtres j Parametres J 



Fl 



Taile : [ 550 x 400 pixels j Arriere-plan : i_^J Cadence : 12 ps 
PuMer : Parametres... Player : 9 ActionScript : 3.0 Profil : Default 



Classe du document : 



A present, I'animation sait qu'elle doit charger et utiliser le fichier HelloWorlcB.as. Lorsque vous 
latestez, le fichier de classe A S est compile dans I'animation. L'execution del'animation initialisela 
classe, qui execute la fonction Heiioworid3 et affiche letexte "Hello World". 
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Travailler avec Flash CS3 

Si I'essentiel denotre travail sefera en ActionScript, il est necessairedeconnaitre certains termeset 
certaines notions concernant le travail avec le scenario, la scene et la bibl iotheque de Flash CS3. 




Si vous debutez avec F lash, tapez "Utiliser F lash" dans la documentation d'aide. Cette section 
livre une explication detaillee de la scene, du scenario, de la bibllotheque et d'autres elements 
de I'espace de travail F lash et vous montre comment gerer I' interface F lash. 



Objets d'affichage et listes d'affichage 

N ous avons deja traite des objets d'affichage. 1 1 s'agit au fond de tous les elements graphiques. L e pi us 
polyvalent des objets d'affichage est le clip, un element graphique complet qui peut inclure n'importe 
quel nombre d'autres objets d'affichage etpossedeun scenario pour I'animation. 

Le sprite est une version plus simpledu clip, qui ne conti entqu' une seule image. Les objets d'affichage 
que nous creerons de toutes pieces en ActionScript seront generalement des sprites, lis sont souvent 
plus efficaces que les clips parce qu'ils n'impliquent pas la surcharge requise pour inclure plusieurs 
images d'animation. 

Parmi les autres objets d'affichage, on peut encore citer les champs texte, les images bitmap et les 
videos. 

Certains objets d'affichage, comme les clips et les sprites, peuventeux-memes contenir d'autres objets 
d'affichage. Parexemple, un sprite peut contenir plusieurs autres sprites, ainsi que des champs texte 
etdes images bitmap. 

L'imbrication des objets d'affichage offre un moyen d'organiser vos elements graphiques. Par 
exemple, vous pouvez creerun unique sprite dejeu ety inclure tous les elements dujeu que vous creez 
en ActionScript. Vous pouvez ensuitey inserer un sprite d'arriere-plan qui conti ent I ui-meme plusieurs 
sprites pour les elements de I'arriere-plan. U n sprite contenant les pieces du jeu pourrait alors venir se 
placer au-dessus et servir de conteneur pour les pieces deplagables. 

Comme i Is peuvent contenir plusieurs objets, les clips et les sprites conservent chacun une liste de ces 
elements afin de determiner I'ordre dans lequel ils doivent les afficher. On parle alors de liste 
d'affichage. Cette liste d'affichage peut etre modifiee pour positionner des objets devant ou derriere 
d'autres objets. 

II estegalement possible dedeplacer un objet d'affichage d'un objet parent a un autre. Cette operation 
ne copie pas I'objet : el I e le supprime d'un cote et I'ajoute de I'autre. Ce systeme rend les objets 
d'affichage incroyablement flexibles et simples d'emploi. 
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du mecanisme d' Acti onScri pt 2.0, qui utilise des niveaux et des profondeurs, oubliez tout des 
a present et adoptez sans tarder la methode plus simple des listes d'affichage. G race a ces 
listes, aucun objet ne se trouve a un niveau defini. L'objet d'affichage le plus lointain se 
trouve simplement etre le premier dans la listeet le plus proche, le dernier. Vous pouvez a tout 
moment deplacer des objets dans la liste, et les risques d'erreur et les effets indirects sont 
considerablement reduits. 



La scene 

L a scene est I a princi pale zone de travail graphique dans Flash. E lie represents I'ecran qui sera observe 
par les utilisateurs lorsqu'ils joueront a votrejeu. 

La Figure 1.8 presents la fenetre Document, dont la scene occupe la plus grande parti e. Le scenario 
apparait egalement en haut de la fenetre. 



Figure 1.8 

La fenetre Document inclut a 
la fois la scene et le scenario. 



HelloWorltG.fla 
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Un grand nombre de nos jeux possederont une scene et un scenario completement vides. Tous les 
elements graphiques seront crees par le code A ctionScri pt. 
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Dans le cas de quelques autres, des elements graphiques se trouveront deja dans la scene. Cette 
approche est particulierement utile lorsqu'un concepteur graphique non programmeur s'attelle a creer 
un jeu. II peut souhaiter disposer les elements d' interface et les ajouter en cours de developpement. 
Dans ce genre de cas, il n'est pas pratique que ces elements soient crees par le code A ctionScript. 

Au cours du developpement, la scene peut etre utilises pour creer des elements graphiques rapides. 
Parexemple, vous pouvez dessiner avec lesoutilsdedessin dans la scene, selectionner la forme, puis 
appuyer sur F8 pour creer un clip dans la bibliotheque. 



La bibliotheque 

La bibliotheque Flash contient tousles elements multimedias requisdansvotrejeu etsetrouveintegree 
dans le fichier SW F final. Vous pouvez importer d' autres elements multimedias dans votre animation, 
comme vous le verrez lorsque nous importerons des images bitmap externes, au Chapitre 6. 

La Figure 1.9 presente le panneau Bibliotheque. II est general ement plus etroit, mais nous I'avons 
etire pour faire apparaitre la colonne Liaison. 

Figure 1.9 

Le panneau Bibliotheque presente 
tous les objets multimedias inclus 
dans I'animation. 
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A la Figure 1.9, la pi upart des elements de la bibliotheque sont des clips. Le premier est un bouton et 
quelques autres situes dans le dossier Sounds sont des sons. 

Certains des clips possedent un nom d'exportation dans la colonne Liaison. II s'agit d'elements qui 
peuvent etre extraits de la bibliotheque par notre code A ctionScri pt a I'execution. 
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Le scenario 

L'animation Flash est decomposes en images. Le scenario en haut de la fenetre permet de choisir 
I'image affichee dans la scene en bas de la fenetre. Comme nous produisons non pas des animations 
mais des applications de jeu, nous al Ions utiliser les images pour differencier les ecrans de nos jeux. 

La Figure 1.10 presents un scenario. Seules trois images sont uti I i sees. Toutes sont des images-cles. 
La premiere est destines a un ecran d'introduction du jeu et contient des instructions. La seconde 
correspond a I'image dans laquelle la partie se joue. La troisieme correspond a un message "Game 
Over" (partie termi nee) eta un bouton "Play A gain" (rejouer). 



Figure 1.10 

Le scenario a ete legerement 
etendu en uti I i sant le menu 
deroulant a droite afin que les 
images soient un peu agrandies. 
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Chaque image-cle possede une etiquette, bien qu'on ne puisse la voir dans le scenario. Un petit 
drapeau apparait dans le caique superieur de chaque image, qui signale la presence d'une etiquette a 
cet endroit. 

Pour voir et definir les etiquettes d'image, vous devez select] onner I'image puis verifier le panneau 
Proprietes. Celui-ci contient un champ Image. Dans lecas present, il contient la valeur "start" et vous 
pouvez le modifier si vous le souhaitez (voir Figure 1.11). 



Figure 1.11 

Le panneau Proprietes permet 
de definir ou de modifier 
I' etiquette de I'image. 
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Si vous examinez la Figure 1.10, vous remarquerez que l'animation contient quatre caiques. Le 
premier, Label, contient trois images-cles. Pour creer des images et des images-cles, vous devez 
utiliser la touche F5 pour ajouter une image au caique et F7 pour ajouter une image-cle parmi ces 
images. 

Lesecond caique, nomme"Score", necontientquedeux images-cles, I'image 1 etl'image 2. L'image 3 
est simplement une extension de I'image 2. Les elements de score presents durant le jeu a I'image 2 
seront ainsi toujours presents a I'image 3. 

Le scenario, la scene et la bibl iotheque seront vos principaux outils visuels pour ledeveloppementde 
vosjeux. 
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Ecrire et modifier du code ActionScript 

S'il sera generalement necessaire de travail ler un peu dans le document Flash pour creer vos jeux, 
vous passerez le plus clair de votre temps dans la fenetre DocumentActionScript. 

Vousavez deja rencontre cette fenetre a la Figure 1.6, mais la Figure 1.12 la presentesous un nouveau 
jour. Elle montre a gauche un menu hierarchique de la syntaxe A ctionScri pt 3.0. 



Figure 1.12 

La fenetre Document 
ActionScript contient 
plusieurs outils pratiques 
danssa partiesuperieure. 
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Cible : HeltoWorld3.fla 



I package < 

import flash . display . * ; 
import flash . text . * ; 



cla 



HelloWorld3 extends MovieClip { 



ilic function HelloWorld3 ( ) { 
var myText:TextField = new TextField(); 
myText.text - "Hello World!"; 
addChild (myText) ,- 
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Tout en haut de la fenetre apparaissent deux onglets. Deux documents sont en effet ouverts : 
HelloWorld3.fla et HelloWorld3.as. lis permettent de travail ler a la fois sur I' animation Flash et sur 
le document ActionScript. Vous pouvez passer de I'un a I'autre en cliquant sur les onglets. Vous 
pouvez egalementouvrir d'autresfichiersActionScript, cequi peutse reveler pratique si vous travail I ez 
avec plusieurs classes ActionScript a la fois. 

Vous remarquerez a la Figure 1.12 que les lignes de code sont indentees. L e moyen approprie de creer 
ces retraits est d'utiliser la toucheTab. Lorsque vous appuyez sur Entree a la fin d'une ligne de code, 
le curseur apparait automatiquement en retrait au bon niveau de la ligne suivante. Si vous souhaitez 
supprimer une tabulation pour ramener une ligne vers la gauche, appuyez simplement sur Suppr ou 
sur M aj +Tab. 
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Vous pouvez egalement selectionner une section de code et appuyer sur Tab pour deplacer 
tout le bloc vers la droite d'une tabulation. Utilisez M aj +Tab pour ramener le bloc d'une 
tabulation vers la gauche. 



Les outils de la partie superieure de la fenetre de script realisent differentes operations et tout 
programmeurA ctionScri pt sedoit de savoir les utiliser. En voici une I iste(commelemontre la fenetre, 
de gauche a droite) : 

■ Ajouter un nouvel element au script. Cet imposant menu deroulant offre acces a chacune des 
commandes ActionScript. Leur nombreesttel qu'il s'avere difficile a utiliser pour lescommandes 
standard, maisil peutetre utile pour les commandes pi us rares. 

■ Rechercher. Utilisez cet outil pour ouvrir la boite de dialogue Rechercher et remplacer. Vous 
pouvez egalement utiliser le raccourci Pomme+F (M ac) ou Ctrl +F (Windows). 

• Verifier la syntaxe. Cet outil permet d'amener le compilateur Flash a operer une verification de 
la syntaxe de votre script. Le resultat s'affiche dans le panneau Sortie. 

• Format automatique. Cet outil reprend votre script entier et le reformate avec des tabulations, 
des espacements et des accolades coherents. Si vous deci dez de I ' uti I iser, assurez-vous de consul ter 
la section Format automatique des Preferences afin d'operer des decisions concernant les actions 
quecebouton doit ou nedoit pas real iser. 

Afficher les conseils de code. Voi la probabl ement I e pi us uti I e de tous ces boutons. L orsque vous 
commencez a taper une fonction, par exemple gotoAndstop(, un conseil de code apparait 
instantanement pour vous faire connaitre les parametres que prend la fonction. Si vous souhaitez 
editer I'appel defonction par la suite, vous pouvez positionnerlecurseur a I'interieur des parametres 
de la fonction et utiliser ce bouton pour afficher denouveau les conseils. 

• Options de debogage. Ce menu deroulant permet de definir et de supprimer des points d' arret. 
Nous traiteronsdu debogage par la suite, dans la section "Test et debogage" decechapitre. 

c Reduire entre les accolades. Si vous cliquez sur ce bouton, la section courante de code entre 
accol ades se redui t a une uni que I i gne. L e code reste present, maisil est masque. Vous pouvez cl i quer 
sur le triangle (M ac) ou le signe plus (Windows) a gauche de la fenetre ou sur le bouton Developper 
tout pour I'etendre. La Figure 1.13 montrea quoi ressemblele code lorsqu' une portion est reduite. 

Reduire la selection. Ce bouton red u i t le code actuellement selectionne. 

■ Developper tout. Ce bouton ramene toutes les sections reduites a leur etat normal. 

s Appliquer un commentairedebloc. Selectionnez une portion de code et appuyez sur ce bouton 
pour transformer la selection en un commentaire en la faisant preceder de /* et suivre de */. 
Consultez la section "Strategies de programmation des jeux ActionScript" pour en apprendreplus 
sur les commentaires dans le code. 
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Figure 1.13 

U n bloc de code a ete reduit. 
Ce mecanisme est pratique 
lorsque vous travaillez sur un 
script tres long et que vous 
souhaitez masquer les sections 
du code sur lesquelles vous ne 
travaillez pas pour le moment. 





t^ort ricah.dlaplay. 'i 
uvon llut.ttit.'i 

public clcnc HrlloMoildl palriutu NnlrOlI I 
public function RclloMorld) () I Wnt mi--- 



• Appliquer un commentaire de ligne. Cliquez sur ce bouton pour transformer la ligne courante 
en un commentai re. Si pi usieurs I ignes sont sel ecti onnees, toutes sont transf ormees en commentai re 
en ajoutant / / au debut de chacune. 

c Supprimer le commentaire. Reconverts les commentaires selectionnes en code. Ce bouton est 
pratique lorsque vous souhaitez supprimer temporairement du code de votre programme. Vous 
pouvez transformer les I ignes en commentai re afin qu'el les nesoient pas compi lees puis supprimer 
les marques de commentaire pour faire reapparaitre le code. 

Afficher ou masquer la boite a outils. Ce bouton affiche ou masque la liste des commandes 
A ctionScript a gauche de la fenetre. 

A droitedesboutonssetrouveun menu deroul ant i ntitule C i bl e qui permetdeselectionnerledocument 
d'animation Flash qui doit se compiler et s'executer lorsque vous selectionnerez Controle > Tester 
I'animation. II vous permet ainsi d'apporter une modification a votre code puis de tester I'animation 
sans avoir a revenir prealablement a la fenetre Document. En general, c'est le dernier document 
d'animation Flash visualise qui apparait dans la liste, mais vous pouvez selectionner un document 
particulier lorsque pi usieurs documents sont ouverts. 

Parmi les autres fonctionnalites importantes de la fenetre Document A ctionScript, il faut encore citer 
les numerosde ligne qui apparaissent cote gauche. Chaque ligne possedeson proprenumero. Lorsque 
vous obtenez des erreurs de compilation en essayant de publier votre animation, el les font reference 
au numero de ligne pour vous permettrede retrouver la source du probleme. 
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Strategies de programmation des jeux ActionScript 

A ctionScri pt 3.0 est tres polyvalent. Vous pouvez adopter toutes sortes de styles de programmation et 
creer dans tous les cas des jeux qui fonctionnent bien. 

Certains programmeurs preferent cependant certains styles plutot que d'autres. Dans ce livre, j'ai 
adopte une methode qui permet de se concentrer sur le code central du jeu, au detriment eventuel 
d'une organisation plus elaboree. 

Methode a une seule classe 

Letroisi erne programme Hello World decechapitre estun simplefichierdecl asse I ie a une animation 
Flash du memenom. C ette approche simple est rapideet facile. 

L'autre option consiste a utiliser differents fichiers de classe pour les differents objets et pro- 
cessus du jeu. II peut cependant alors devenir difficile de se rappeler ou se trouvent les diffe- 
rentes portions de code des petlts jeux. Par exemple, si une balle entre en collision avec une 
raquette dans un jeu, la detection de collision va-t-elle se trouver dans la classe de I'objet 
balle ou dans eel I e de I'objet raquette ? 

Vous pouvez parfaitement decomposer le code en plusieurs classes si vous etes familiarise 
avec cetype d'organisation dans d'autres langages de programmation. 



Avec un fichier de classe, toutes les proprietes de classe peuvent etre clairement definies comme des 
variables en haut de la classe. 

La classe du document controle le scenario principal, ce qui signifie qu'il est possible d'appeler des 
fonctions publiques dans la classe a partir de boutons places dans la scene par les concepteurs. On 
peut aussi aisement controler le scenario principal en passant d'une image a une autre. 

La methode des petits pas 

Voila I'information qui risque bien d'etre la plus importante du livre : si vous ne savez pas comment 
programmer quelque chose, decomposez votre probleme en etapes plus petites et poursuivez ainsi 
jusqu'a ce que vous puissiez trouver la solution. 

Les programmeurs debutants et certains programmeurs experimented qui oublient tout simplement 
cette regie se retrouvent souvent bloques lorsqu'ils ecrivent du code, lis se disent : "Je ne sais pas 
comment faire pour que le programme realise cette tache." L e probleme tient cependant uniquement 
au fait que la tache n'en est pas une, mais en real ite plusieurs. 
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Par exemple, supposons qu'un programmeur souhaite faire pivoter un vaisseau spatial lorsque le 
joueur appuie sur les touches flechees du clavier. II se fruste parce qu'il ne sait pas comment realiser 
cette tache. 

La solution consiste a decomposer la tache de "rotation du vaisseau" : verifier si la touche flechee 
de gauche a ete enfoncee ; soustraire un montant a la propriete rotation du sprite du vaisseau ; 
verifier si la touche flechee de droite a ete enfoncee ; ajouter un montant a la propriete rotation du 
vaisseau. 

La tache de rotation du vaisseau correspond done finalement a quatre petites taches combinees en 
une. 

Parfois, les programmeurs debutants font la meme erreur a plus grande echelle. lis supposent 
qu'ils ne pourront pas creer un jeu entier, parce qu'il semble trop complexe. Pourtant, si vous 
decomposez le jeu en une serie de taches de plus en plus petites (et vous occupez de ces taches 
une par une), vous pourrez creer n'importe quelle sorte dejeu. 

Un jeu demarteau simplepourra ne requerir qu'une centaine detaches, alors qu'un jeu de plate- 
forme complexe en necessitera plusieurs centaines. Chacune des taches, si el I e se trouve 
decomposer en ses etapes les plus elementaires, se revelera cependant tout aussi facile a 
programmer. 

Bonnes pratiques de programmation 

Pendant que vous apprenez a utiliser le langage ActionScript 3.0 pour creer des jeux, il est aussi 
judicieux que vous gardiez a I 'esprit quelques-unes des bonnes pratiques en matierede programmation. 
II n'existe pas tant de regies que cela a respecter. J e m'autorise moi-meme a les enfreindre a certaines 
occasions dans ce livre. II ne fait pourtant aucun doute que vous serez mei 1 1 eur programmeur si vous 
commencez par bien assimiler ces bonnes pratiques. 

Du bon usage des commentaires 

Ponctuez votrecode de commentaires simples mais signifiants. 

Ce petit effort supplemental du moment vous attirera tous les eloges quelques mois plus tard lorsque 
vous devrez vous replonger dans vos programmes pour les modifier. 

Si vous travail I ez avec d'autres programmeurs ou si vous pensez qu'il y a la moindre chance qu'une 
autre personnepuisse avoir a modifier votrecode a I'avenir, cesimpleconseil doit faire figure de regie 
imperative. 

II existe generalement deux types de commentaires : les commentaires de ligne et les commentaires 
de bloc. Le commentaire de ligne est une simple remarque en style telegraphique a la fin d'une ligne 
ou quelquefois une simple ligne de commentaire avant la ligne de code. Le commentaire de bloc est 
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un commentaire plus important, generalement d'une ou de plusieurs phrases, qui apparait avant une 
fonction ou une section de code : 

someActionScriptCode() ; // Voici un commentaire de ligne 

// Voici un commentaire de ligne 
someActionScriptCode ( ) ; 

/* Voici un commentaire de bloc. 

Les commentaires de bloc sont plus longs. 

Et contiennent une description concernant le code qui suit. */ 

1 1 est egalement important de rendre vos commentai res signifiants et concis. N e vous contentez pas de 
reformulercequelecodeevoqueen lui-meme, commececi : 

// Boucle 10 fois 

for (var i:int=0;i<10;i++) { 

En outre, n'utilisez pas de paragraphe de texte lorsque quelques mots suffisent. Les commentaires 
inutilement longs peuvent devenir aussi inefficaces que s'ils etaient absents. Ne cherchez pas a en 
faire trap. 

Utiliser des noms de variable et de fonction descriptifs 

Ne craignez pas d'utiliser des noms longs et descriptifs pour vos variables et vos fonctions. Vous 
creerez ainsi du code qui s'expliqueen partiede lui-meme. Prenez cetexemple : 

public function placerTruc() { 
for(var i:int=0;i<10;i++) { 
var a:Chose = new Chose(); 
a.x = i*10; 
a.y = 300; 
addChild(a) ; 

} 

} 

Q ue fait ce code? II semble placer des copies d'un clip a I'ecran. M aisquel clip, dans quel but ? Voici 
une autre version du programme : 

public function placerPersonnagesEnnemis() { 

for(var numEnnemi:int=0; numEnnemi<10; numEnnemi++) { 
var ennemi:PersonnageEnnemi = new PersonnageEnnemi( ) ; 
ennemi.x = numEnnemi*10; 
ennemi.y = 300; 
addChild(ennemi) ; 

} 

} 

II sera deja bien plus facile derevenir a ce code quelques mois plustard. 
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L'exception courante a cette regie concerne I'utilisation de la variable i comme variable 
incrementale dans les boucles. Dans I'exemple precedent, j'aurais normalement conserve la 
variable i au lieu dela remplacer par numEnnemi. Les deux approches conviennent, mais il est 
devenu assez standard pour les programmeurs d'utiliser la variable i dans les boucles. En 
fait, les programmeurs poursuivent generalement cette logique en utilisant les variables j et 
k dans les boucles for imbriquees. 



Transformer le code repetitif ou similaire en fonction 

Si vous devez utiliser la meme ligne de code plusieurs fois dans un programme, envisagez de la 
transformer en une fonction etd'appeler cette fonction a la place. 

Parexemple, il se peut que vous souhaitiez mettreajourlescorea plusieurs endroits de votrejeu. Si 
le score est affiche dans un champ texte nomme scoreDispiay, vous procederez ainsi : 

scoreDisplay.text = "Score: "+playerScore; 

Au lieu d'inclure cette meme ligne de code a cinq endroits differents, il est preferable de placer un 
appel de fonction dans ces cinq emplacements : 

showScore( ) ; 

Ensuite, la fonction peut prendre la forme suivante : 

public function showScore() { 

scoreDisplay.text = "Score: "+playerScore; 

} 

A present que ce code est situe a un seul endroit, il devient tres facile de changer I e terme score et de 
le remplacer par Points. Inutile d'effectuer une operation de recherche et de remplacement dans le 
code : il n'y a qu'un seul endroit a modifier. 

Vous pouvez en fairede meme lorsque lecode n'est pas identique. Parexemple, supposons que vous 
ayez une boucle dans laquelle vous placez dix copies du clip A a gauche dela scene et une autre dans 
laquelle vous placez dix copies du clip B a droite de la scene. Vous pouvez creer une fonction qui 
prend la reference du clip et la position horizontale de remplacement et positionne les clips en 
fonction de ces parametres. Ensuite, vous pouvez appel er votre fonction deux fois, une fois pour le 
clip A et une autre pour le clip B. 

Tester votre code par petits blocs 

A mesure que vous ecrivez votre code, testez-le sur des portions aussi reduites que possible. Vous 
pourrez ainsi capturer les erreurs a mesure que vous ecrivez votre code. 
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Par exemple, si vous souhaitez creer une boucle qui place au hasard dix cercles de couleur differente 
a I'ecran, vous devez d'abord creer les dix cercles en les positionnant de maniere aleatoire. Testez ce 
code et faites-le fonctionner comme vous le souhaitez. Ensuite, ajoutez la fonctionnalite qui definit 
aleatoirement la couleur. 

II s'agit en realite d'une variante de la "methode des petits pas". Decomposez votre tache de 
programmation en petites etapes. Creez le code pour chaque etape et effectuez un test a chaque fois. 



Notions elementaires du langage ActionScript 

Examinons la syntaxe de programmation la plus elementaire en ActionScript 3.0. Si vous debutez 
avec ActionScript mais que vous ayez deja utilise un autre langage de programmation, vous pourrez 
ainsi decouvrir rapi dement lefonctionnement d' ActionScript. 

Si vous avez deja utilise ActionScript ou ActionScript 2.0, vous aurez I'occasion de constater les 
differences introduites avec ActionScript 3.0. 



Creer et utiliser des variables 

Lestockagedevaleurspeuts'operer en ActionScri pt 3.0 a I'aided' unesimple instruction d'attribution. 
Vous devez cependant declarer vos variables la premiere fois que vous les utilisez. Pour cela, vous 
pouvez placer le mot-cle var avant le premier usage de la variable : 

var maValeur = 3; 

Vous pouvez aussi commencer par declarer votre variable et I' utiliser par la suite : 

var maValeur; 



['instruction var n'est pas requise avec ActionScript 2.0. E lie Test en revanche avec Action- 
Script 3.0. 



,//:, 



Lorsque vous creez une variable de cette maniere, el le prend le type polyvalent obj ect. Cela signifie 
qu'elle peut contenir n'importe quel type de valeur de variable: un nombre, une chaine comme 
"Hello" ou un contenu plus complexe comme un tableau ou une reference de clip. 

Si vousdeclarez unevariablecommeetantd'un type specifique, vous ne pourrez en revanche I' utiliser 
que pour stacker des valeurs du meme type : 



var maValeur:int = 7; 
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Une variable de type int peut etre un entier, positif ou negatif. Les variables de type uint sont 
destinees uniquement aux entiers positifs. Si vous souhaitez utiliser des valeurs fractionnelles (aussi 
appelees nombres a vi rgul e flottante), vousdevez utiliser le type Number : 

var maValeur:Number = 7.8; 

Vous pouvez aussi utiliser les types string et Boolean. Les valeurs string contiennent du texte, 
tandis que les valeurs Boolean correspondent a true ou a false. 

N ous venons d'enumerer les types primitifs de base. Vous pouvez cependant avoir aussi des tableaux, 
des references de clip et de sprite et de nouveaux types qui correspondent aux classes de code que 
vous creez. 




II y a un a vantage evident en termes d'efficacite a utiliser des variables preclsement definies. 
Par exemple, I ' acces aux va I eurs int se fait bl en plus rapl dement qu' aux valeurs Number. Vous 
pouvez ainsi contribuer a accelerer des processus critiques dans vos jeux en choisissant des 
types aussi basiques que possible pour toutes vos variables. 



Les operations sur les variables numeriques ressemblent a eel I es de presque tous les autres langages 
de programmation. L'addition, la soustraction, la multiplication et la division s'effectuent avec les 
operateurs +, -, * et / : 

var monNombre: Number = 7.8+2; 

var monAutreNombre:int = 5-6; 

var monAutreNombre: Number = monNombre*3; 

var monNombreSuivant: Number = monNombre/monAutreNombre; 

Vous pouvez egalement utiliser des operateurs speciaux pour simplifier les operations. Par exemple, 
l'operateur ++ incremented' une unite la variable a laquelle il s' applique. L'operateur -- lui soustrait 
une unite : 

monNombre++; 

Vous pouvez utiliser +=, -=, *=et /= pour real iser une operation sur la variable d'origine. Par exemple, 
I'instruction suivante ajoute sept a la variable : 

monNombre += 7; 

Vous pouvez egalement utiliser des parentheses pour definir I'ordre des operations : 

var monNombre: Number = (3+7) *2; 

Les valeurs string peuvent egalement etre manipulees avec l'operateur + et l'operateur += : 

var maValeurString :String = "Hello"; 

var monAutreValeurString = maValeurString+"World" ; 

maValeurString += "World"; 
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Lorsque nous utilisons des variables dans des classes, el les deviennent des proprietes de cette classe. 
Dans ce cas, il faut encore les definir comme privees ou publiques. Les variables privees ne sont pas 
accessi bl es depui s I e code hors de la classe. Dans la plupart des cas, cela ne pose pas deprobleme, car 
les fonctions de classe doivent etre les seules a pouvoir modifier les valeurs des variables de classe. 

Instructions conditionnelles 

instruction if fonctionne en ActionScript comme el I e le fait dans de nombreux langages de 
programmation : 

if (maValeur == 1 ) { 
f aireQuelqueChose( ) ; 

} 

L'operateur de comparaison == verifie I'egalite generale. Vous pouvez egalement utiliser >, <, >= et <= 
pour determiner si une valeur est superieure, inferieure, superieure ou egale ou inferieure ou egale a 
une autre. 

II estaussi possible d'ajouter les mots-cles else et else if pour etendre la structure if : 

if (maValeur == 1 ) { 

faireQuelqueChose() ; 
} else if (maValeur == 2) { 

faireAutreChose( ) ; 
} else { 

neRienFaire( ) ; 

} 

Vous pouvez egalement inclure des conditions plus complexes avec && et 1 1. Ces signes represented 
les operateursde comparaison ET etOU. 

Avant ActionScript 3.0, il eta i t possible d'utiliser les mots-cles and et or a la place de && et 1 1. 
Ces mots-cles ne sont malntenant plus acceptes. 




if ((maValeur == 1 ) && (maChaine == "This")) { 
f aireQuelqueChose( ) ; 

} 
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Boucles 

Les boucles s'effectuent avec I'instruction forou I ' i nstructi on while. 

L'instruction for contient trois parties: I'instruction initiale, une condition et une instruction de 
changement. Par exemple, le code suivant positionne la variable i a zero, boucle tant qu'elle est 
inferieure a dix et augmente la valeur de i a chaque passage dans la boucle : 

for(var i:int=0;i<10;i++) { 
f aireQuelqueChose( ) ; 

} 

Vous pouvez utiliser la commande break pour quitter une boucle a tout moment. La commande 
continue ignore le reste des lignes de code dans la boucle et commence la prochaine iteration dans la 
boucle. 

La boucle while est une boucle qui se poursuit indefiniment jusqu'a cequ'une condition initiale soit 
remplie : 

var i:int = 0; 
while (i < 10) { 
i++; 

} 

Laboucledoestunevariantedelabouclewhiie. Ellelui estpourl'essentiel identique, aceci presque 
I'instruction conditionnelle intervient apres la boucle, ce qui lui garantit de s'executer au moins une 
fois : 

var i:int = 0; 
do { 

i++; 

} while (i <10) ; 

Fonctions 

Pour creer une fonction avec ActionScript 3.0, vous devez simplement declarer la fonction, les 
parametres qui lui sont passes en entree et la sortie qu'elle retourne. Ensuite, vous definissez la 
fonction avec le code qu'elle contient. 

Si la fonction se trouve dans une classe, vous devez egalement indiquer s'il s'agit d'une fonction 
publiqueou d'une fonction privee. Les fonctions privees nesont pas accessibles depuis I'exterieurde 
la classe. Avec notremethodededeveloppementdejeu a classe unique, nous utiliserons principalement 
des classes privees. 
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Vous constaterez parfois que les fonctions sont appelees des methodes. Dans la documenta- 
^ ti on, le terme de methode est frequemment utilise, mais c'est le mot-cle function qui est 
adopte pour la definition, comme vous le verrez ci-apres. J e prefere done pour ma part uti- 
liser le terme defonction. 



Voici une fonction simple a I'interieur d'une classe. Si cette fonction se trouvait dans le scenario 
principal au lieu d'etre dans une classe, nous pourrions ignorer le mot-cle private : 

private function maFonction(nonNombre:Number, maChaine:String) : Boolean { 

if (monNombre == 7) return true; 

if (maChaine. length < 3) return true; 
return false; 
} 

Cette fonction d'exemplesecontente de retourner true si le nombre vaut sept ou si la longueur de la 
chaine est inferieure a trois caracteres. II s'agitd'un exemple simple qui illustre la syntaxede creation 
d'une fonction. 



Test et debogage 

Personnenepeutpretendreecriredu premierjetun codeabsolumentparfait, pasmemeleprogrammeur 
le plus chevronne au monde. II est done necessaire de programmer votre code, de le tester et de le 
deboguer. 

Types de bogues 

1 1 existe trois raisons de deboguer votre code. L a premi ere concerne I e cas ou vous obtenez un message 
d'erreurlorsde la compilation ou del 'execution de votre code. Vous devrez alors retrouverleprobleme 
et lecorriger. En general, vous ledecouvrirez immediatement. II pourrait par exemple s'agird'un nom 
de variable mal orthographie. 

La seconde raison concerne le cas ou le programme ne fonctionne pas comme prevu. Par exemple, un 
personnage cense bouger ne le fait pas, I'entree de I'utilisateur n'est pas acceptee ou les balles tirees 
par le heros traversent I'ennemi sans I e toucher. Ce type de bogue doit etre analyse et traque et cette 
operation peut parfois prendre du temps. 

La troisieme raison de deboguer votre code concerne le cas ou vous souhaitez I'ameliorer. Vous 
pouvez reperer les i nefficacites et les problemes qui generent des ralentissements. Parfois, ces 
problemes sont aussi critiques que des bogues, car un jeu lent peut devenir aussi injouable qu'un jeu 
dysfonctionnant. 
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Le type de question I e plus courant que j 'obtiens de la part d'autres programmeurs concerne des 
cas ou le code nefonctlonne pas comme prevu. Puis-je leur dire ce qui cloche ? 

Oui, je le peux, mais la reponse se trouve juste devant eux. II suffit qu'ils exploitent leurs 
competences en debogage pour le savoir. Or, en qualite de createur du code, ce sont eux les 
mieux places pour le faire. 



Methodes pour le test 

II existeplusieurs manieresdepisterlesproblern.es dans votrecode. L'approchela plussimpleconsiste 
tout simplement a le reparcourir mentalement. Par exemple, parcourez lecode suivant ligne par ligne 
et effectuez les calculs par vous-meme, comme si vous etiez I'ordinateur : 

var monNombre :int = 7; 
nonNombre += 3; 
nonNombre *= 2; 
monNombre++; 

Inutile d'executer ce code pour savoir que la valeur de monNombre est a present 21. 

Dans les cas ou le code est trop long ou lorsque les calculs sont trop difficiles a realiser, une simple 
commande trace transmet des informations au panneau Sortie afin que vous puissiez les examiner : 

var monNombre :int = 7; 
nonNombre += 3; 
nonNombre *= 2; 
nonNombre++; 

trace( "nonNombre = ", monNombre); 




Avant F lash C S3, la commande trace n'acceptait qu'une unique chame et la transmettait au 
panneau Sortie. Elle peut maintenant accepter n'importe quel type de donnees, ainsi que des 
elements multiples separes par des virgules. Ces nouvelles capacir.es en font maintenant un 
outil bien plus utile pour le debogage. 



J 'utilise moi-meme assez souvent des instructions trace en cours de developpement. Par exemple, si 
le joueur doit operer une serie de choix au debut du jeu, j'envoie les resultats de ces choix vers le 
panneau Sortie avec trace. J 'obtiens ainsi pendant que j'effectuemes tests un rappel des options que 
j'ai choi si es avant dejouer aujeu si quelque chose d'inattendu seproduit. 
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Utiliser le debogueur 

Flash CS3 vous permet d' utiliser un debogueur d'execution pour tester votre code pendant que votre 
animation s' execute. Si vousutilisiez auparavant le debogueurA ctionScript 2.0, nevousfiez pas a ces 
anciennes sensations : le debogueurA ctionScript 3.0 est un tout autre animal. 

Definir un point d'arret 

Le moyen le plus simple de deboguer un programme consiste a definir un point d'arret. Vous pouvez 
le faire en selectionnant une ligne de votre code et en choisissant Deboguer > Basculer le point 
d'arret dans la barre des menus. Vous pouvez egalement appuyer sur Commande+B (Mac) ou 
Ctrl +B (Windows) pour definir ou supprimer un point d'arret. 

La Figure 1.14 presentelecodeDebugExamplaas, danslequel un point d'arret est defini. II apparait 
sous la forme d'un cercle rouge a gauche de la fenetre avant la huitieme ligne. Le programme cree 
simplement dix champs texte contenant les numeros 0 a 9 et les place vertical ement du cote gauche 
del'ecran. 



Figure 1.14 

Le curseur a ete place a la ligne 8 
avant dechoisir Deboguer >Basculer 
le point d'arret afin de definir un point 
d'arret a cetendroit. 



Cible : DebugExample.fb 



DebugExample.fla | DebugExample.as | 

ft j3 v 1 6 86, HSIf PPC? E 

package { 

import flash. display . *; 
import flash . text . * ; 



public class DebugExample extends MovieClip { 

public function DebugExample ( ) { 
for(var i:int=0;i<10;i++) { 
showNumber (i) ; 

> 

> 

public function ShowNumber (whichNum : int) ( 
var myText :TextField = new TextField(); 
myText.text = String (whichNum) ; 
myText. v = whichNum*20; 
addChild (myText) ; 

> 



Ligne 8 de 20, Col 4 



Une fois qu'un point d'arret est defini, vous pouvez utiliser la commande Deboguer > Deboguer 
I'animationau lieu deControle >Tester I 'animation pour tester votre ani mation. Lorsquele programme 
atteint la ligne ou se trouve le point d'arret, il s'interrompt et affiche une variete d'informations dans 
differentes fenetres de debogage. 
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Si vous utilisez la commande Deboguer> Deboguer I' animation avec le point d'arret a la I i gne 8, 
toute uneseriede panneaux s'afficheen plusde I'animation Flash qui s' execute (voir Figure 1.15). 



Figure 1.15 

Le panneau Debogage presente 
diverses informations concernant 
I'etatde votre programme. 
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Parcourir le code au pas a pas 

Cinq boutons apparaissent en haut de votre panneau Console de debogage dans le coin superieur 
gauche. Le premier est le bouton Continuer, qui reprend la lecture de I'animation a partir du point ou 
elles'est interrompue. Le second est un X . II interrompt la session de debogage et relance I'animation 
a parti r de ce poi nt sans debogage. 

Lestroisautres boutons concernentleparcoursdu codeau pas a pas. Le premier, Pas a pas principal, 
execute la lignecouranteet passe a lasuivante. Si la I igne decode couranteappelle une autre fonction, 
il execute cette fonction. Le bouton suivant, Pas a pas detail le, introduit le programme dans une 
nouvelle fonction s'il en existe une dans la meme I igne. En utilisant ce bouton de maniere repetitive, 
vous pourrez consulter une a une chaque ligne individuelle du programme au lieu de sauter les appels 
de fonction. 

Le dernier bouton ressort de la fonction courante. U ti I isez- 1 e pour terminer I 'execution de la fonction 
courante et passer a la ligne suivante de la fonction que vous venez de quitter. 

La Figure 1.16 presente les panneaux debogage unefois que vous etesentre dans la fonction showNumber 
puis descendu de quelques lignes. Comme vous pouvez le voir, le panneau Variables presente la 
valeur de i. Vous pouvez egalement etendre la variable myText pour voir toutes les propriet.es du 
champ texte. 
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En haut a gauche, lepanneau dedebogageindiqueou vousvoustrouvez dans le programme. Danscet 
exemple, vousvoustrouvez actuellement dans la fonction showNumber, qui a eteappeleea parti r de la 
fonctionconstructeurdecetteclasse. Cetteindicationse revel e pratique lorsquevousavez unefonction 
qui peut etre appelee a parti r de plusieurs emplacements. 

Le fait de savoir comment utiliser le debogueur pour corriger des bogues et des comportements 
inattendus estaussi important que savoir comment ecri re du code. Lorsquevous travail I erez avec les 
jeux de ce livre et tenterez de les modifier pour les adapter a vos besoins, apprenez egalement a 
deboguer votre code. 



Figure 1.16 

Les panneaux 
de debogage 
presentent I'etat 
du programme a 
mesurequevous 
en parcourez les 
differentes etapes. 
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Publier votre jeu 

U ne fois que vous aurez termi ne un jeu, que vous I'aurez teste et aurez ete satisfait, i I sera temps de le 
publier. Lesjeux Flash se publient general ement sur leWeb en etant incorporesdans des pages Web. 

Flash CS3 facilite considerabl ement ce processus, mais il convient de comprendre quelques options 
avant de se lancer dans la publication. 

Pour acceder a la boite de dialogue Parametres de publication, choisissez Fichier >Parametres de 
publication. La boite de dialogue Parametres de publication contienttrois sections : Formats, Flash et 
HTML. 
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Formats 

Les parametres Formats (voir Figure 1.17) permettent de selectionner les fichiers a exporter. 

Les formats d'image designent des substitutions lorsque I'utilisateur ne possede pas de lecteur Flash. 
L'exportation QuickTime sert a placer une animation Flash 5 dans un fichier QuickTime. A ucun de 
ces parametres ne nous concerne en tant que developpeurs de jeux A ctionScript 3.0. 

Les deux options Projection peuvent etre uti I i sees pour creer des versions autonomes de nos jeux. 
E I les represented un moyen completement different d'exporter vos animations terminees. 



Figure 1.17 

Seuls les formats Flash et HTM L 
sontselectionnes pour l'exportation. 



Parametres de publication 



Profil actuel : Default 



Formats jflaah | HTmT] 



Type : 

[V] Flash (,swf) 
0 HTML (.html) 
[J Image GIF (.gif) 

□ Image JPEG (.jpg) 

□ Image PNG {.png) 

O Projection Windows (,exe) 

□ Projection Macintosh 
O&idcTime avec piste Flash (,mov) 



DebugExample, swf 
DebugExample.html 
DebugExample.gif 
DebugExample.jpg 
DebugExample , png 
DebugExample.exe 
DebugExample, app 
DebugExample . mo v 



u 
U 
u 
u 

0 
I.J 



Si vous possedez deja un modelede page Web personnalisequevous utilisez sur votre site, I'option 
HTML nesera pasforcement necessaire. Danscecas, vousn'avez pasbesoin de page par defaut dans 
laquelle incorporer votre jeu. Vous pouvez cependant I'exporter quoi qu'il en soit puis recuperer le 
code du corps de la page d'exemple afin de I' utiliser a I 'emplacement approprie de votre page 
personnalisee. 



Flash 

Les parametres Flash sont les plus importants pour l'exportation d'une animation Flash complexe 
comme nos jeux. De preference, exportez des fichiers Flash Player 9, en choisissant la version 
A ctionScri pt 3.0 (voir Figure 1.18). 
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Cochez egalement I'option Proteger contre I'importation. II deviendra ainsi plus difficile pour vos 
utilisateurs detelecharger votre animation et de la modifier pour se I'approprier, 



M alheureusement, il n'existe pas de moyen garanti de proteger votre animation F lash apres 
qu'ellea ete publiee sur leWeb. II existedes programmes de decompilation qui permettentde 
recuperer un fichler SWF compresse et protege et de le reconverts en une animation F LA 
modifiable. Les options Proteger contre I'importation et Compresser I'animation compll- 
quent ce processus mais ne protegent pas de maniere absolue contre ces techniques. 



Le reste des parametres Flash concerne les parametres de compression et de securite. Consultez la 
documentation Flash pour une documentation detail lee concernant chacun de ces reglages. 



Figure 1.18 

Ces parametres sontconseilles 
pour I* utilisation habituelledes 
jeux Flash. 



Parametres de publication 



■ I 



Profil actuel : Default 



Formats Flash HTML 



Version : 
Ordre de chargement : 
Version d'ActionScript : 

Options : 



Flash Player 9 



De bas en haut ▼ 



ActionScript 3.0 



lJ Generer un rapport de taille 
«/ Proteger contre I'importation 
I I Omettre les actions Trace 

Autonser le debogage 
[7] Compresser I'animation 
O Ophmiser pour Flash Player 6 r65 
{7\ Exporter les caiques masques 
□ Exporter SWC 



Mot cie passe : 
Delai du script : 

Qualite JPEG : 

Flux continu : 
Son d'evenement : 



80 



0 100 
MP3, 16 Kbits/s, Mono j Definir... 

MP3, 16 Kbits/s, Mono | Definir,., 

Neutraliser les parametres audio 
n Exporter les sons du periphenque 
Securite de lecture locale : Acces aux fichiers locaux uniquement ^ 



| Pubtef | | OK | | Anraier | 
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HTML 

Les pararnetres HTML n'importent que si vous souhaitez utiliser la page HTML creee avec la 
commande Publier. II est cependant judicieux devoircommentAdobeconsiderequ'il est preferable 
de publier vos animations Flash. La Figure 1.19 presenteces options. 



Figure 1.19 

Les pararnetres HTM L vous permettent 
de choisir un modele HTM L a exporter 
avec I'animation Flash. 



Pararnetres de publication 



Profil actuel 

[ 



k|[£i|o|ti I 



Formats Flash rfTML 



Modele ; | Flash setiement 



T][ Infos 



V Detecter la versic 
Version : 9.0 



Dimensions : ; Identique a I'animation 



Lecture :[I]En pause au demarrage /Afficher le menu 

■/ Boude □ Police depe'nprienque 



Qualite : | Bevee 
Mode fenetre : | Fenetre 



Alhgnement HTML : I Par defaut 



Echelle : Par defaut (afficher tout) 



Horizontal 
Alignement Flash : Centre 



Vertical : 
| | Centre - ] 

/ Afficher les messages d'averissement 



Le reglage par defaut (Flash uniquement) utilise du code JavaScript pour incorporer I'animation. II 
utilise le fichier AC_RunActiveContent.js qui est egalement genere lors de la publication. La page 
HTM L principale charge ensuite leJavaScript dans ce fichier, qui place I'animation Flash dans une 
balise <div> a I'interieur de la pageWeb. 



Pourquoi se dormer la peine d' utiliser du J avaScri pt a lors qu'il serai t possible de n' utiliser 
qu'une simple balise <object>/<embed>, comme vous I'avez fait les armies precedences ? En 
raison d'un conflit portant sur des brevets, M icrosoft a du changer la maniere d'incorporer 
les elements multimedias dans les pages sous Internet Explorer. Tous les elements multime- 
dias incorpores directement dans une page requierent maintenant un die pour etre actives 
dans Internet Explorer 7 et certai nes versions d'lnternet Explorer 6. Cette methode J avaS- 
cript evite cependant ce die supplementaire. 
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L'une des options souvent utilisees consiste a amener I' animation Flash a se redimensionner pour 
remplir la fenetre entieredu navigateur. Cette misea I' echelle peut s'effectuer en choisissant I'option 
PourcentagedanslemenuderaulantDimensionsetenfixantlaLargeuretlaHauteura 100. L'animation 
s'etend alors de maniere a remplir la fenetre tout en conservant ses proportions. 

L' option Taille exacte de la liste deroulante Echelle I ui permet de perdre ses proportions d'origine et 
des'etendre vertical ement pour s' adapter a la hauteur de la fenetre et horizontal ement pour couvrirsa 
largeur. 

Comme tous les graphismes vectoriels se redimensionnent harmonieusement dans Flash et que votre 
code peut fonctionner sans probleme a n'importe quelle echelle, il est general ement judicieux de 
permettre a I ' uti I isateur d'ajuster la taille du jeu en modifiant simplement la taille de sa fenetre de 
navigateur. Les utilisateurs qui possedent de petits ecrans et les autres dotes de grands pourront ainsi 
jouer aux jeux comme ils I'entendent. 

LeparametreQualite fait partie des autres options disponibles.Avec le reglage E levee, lelecteur Flash 
reproduitr image a haute resolution afin d'obtenir le meilleur effet de lissagesur les bords des formes 
vectorielles. L'option M oyenne red u i t la resolution du lissage mais ameliore les performances de 
l'animation. Avec l'option Elevee automatiquement, Flash tente d'utiliser le reglage Elevee mais 
repasse a l'option M oyenne si la lecture est trap lente. Le reglage Inferieure supprime le lissage 
mais propose la meilleure vitesse de lecture. 



Chek-list de la programmation de jeux ActionScript 

Lorsque vous creez unjeu Flash, plusieurs facteurs doivent etre pris en compte. Un element cle peut 
toujours etre oublie qui amenerait le jeu a ne pas fonctionner correctement. Pour a/ iter certains 
problemes simples, voici une check-list rapidea laquelle vous pourrez vous reporter a I'occasion. 

Parametres de publication et de document 

II est important de se rappeler qu'il existe des parametres essentiels dans la boite de dialogue 
Parametres de publication et dans le panneau Proprietes de l'animation. 

La classe du document est-elle correctement definie ? 

La Figure 1.7 montre comment definir la classe du document en utilisant le panneau Proprietes de 
l'animation. Si vousoubliez de defini r ce reglage, l'animation s'executera etignorera tout simplement 
la classe que vous avez creee. 

Les parametres de publication sont-ils correctement definis ? 

A ssurez-vousde definir les Parametres de publication de maniere que l'animation Flash soit compiles 
pour Flash 9 et ActionScript 3.0. II est assez improbable que votre animation se compile si ces 
parametres ne sont pas correctement definis, mais cela reste possible. 
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Verifier les parametres de securite 

Dans la section Flash des Parametres de publication figure un parametre Securite de lecture locale. Vous 
pouvez choisir I'option Acces aux fichiers locaux uniquementou I' option A ccesau reseau uniquement. 
A fin devous assurer que vos animations Flash sont securisees, choisissez I'option appropriee. 

Ce reglage peut poser probleme si vous devez acceder a des fichiers locaux et que I'option Acces reseau 
uniquement soitselectionnee. Si vous utilisez des fichiers externeset que quelque chose nese passe pas 
comme prevu lorsque vous chargez les fichiers sur un serveur, commencez par verifier ces parametres. 

Noms des classes, des fonctions et des variables 

M erne en vous eff orcant de suivre les bonnes prati ques de programmati on precedemment menti onnees, 
il se peut que vous commettiez des erreurs simples parfois difficiles a retrouver. 

Penser a la casse des caracteres 

Lorsque vous nommez une variable ou une fonction, la casse des caracteres est prise en compte. 
mavariabie et mavariabie sont ainsi completement differentes. De la meme maniere, une classe 
nominee maciasse execute la fonction maciasse lorsqu'elle s'initialise. Si vous avez nomme votre 
fonction maciasse, el I e ne sera pas appelee. 

Les incoherences de noms de variable sont habituel lement capturees par le compilateur, car un nom 
de variable mal orthographie n'est pas initialise, mais il reste possible d'oublier de declarer une 
variable et de la declarer de nouveau avec une autre casse de caracteres. Voila le genre d'erreur a 
surveiller. 

Les fichiers de classe de I'animation sont-ils presents ? 

Si un clip se voit attribuer des proprietes Liaison que le code ActionScript doit utiliser, il peut utiliser 
la classe dynamique par defaut ou vous pouvez creer une classe pour lui. Par exemple, vous pouvez 
creer un clip EnemyCharacter et lui associer un fichier declasse E nemyC haracter.as. 

Rien de plus facile cependant que d'oublier cette classe ou de I'orthographier de maniere incorrecte. 
Par exemple, un fichier E nemycharacter.as sera tout simplement ignore et ne sera pas lie au clip 

EnemyCharacter. 

Les classes etendent-elles le bon type ? 

Vous pouvez commencer la classe d'une animation par une definition dece genre : 

public class myClass extends Sprite { 

Toutefois, en etendant un sprite plutot qu'un Movieciip, vous presupposez que I'animation ne 
contient qu'une image. Tout code qui ferait reference aux autres images ne fonctionnerait des lors pas 
comme prevu. 
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La fonction constructeur possede-t-elle le bon nom ? 

Si vous avez une classe nommee maciasse, la fonction constructeur doit etre tres precisement nominee 
maciasse, sansquoi el le nes'executera pas lorsque la classe sera initialiser Si vous nesouhaitez pas 
qu'elle s' execute immediatement, nommez-la par exemple lancerMaciasse et appelez-la apres que 
I' image demarre. 

Problemes d'execution 

II existeaussi des problemes qui neprovoquentpasd'erreurdecompilateuretnesefontpasremarquer 
au depart, lis peuvent apparaitre par la suite en cours de developpement et se reveler tres difficiles a 
debusquer. 

Definissez-vous des proprietes avant que I'objet ne soit pret ? 

En voila un qui m'agace particulierement. Vous passez a une nouvelle image dans I'animation ou un 
clip et vous essayez de definir une proprieted'un objet ou d'y acceder. M alheureusement, I'image et 
ses objets n'ayant pas encore ete initialises, la propriete concernee n'existe pas. 

Les fichiers TooEarlyExample.fla et TooEarlyExample.as en livrent un bon exemple. La classe 
sautea I'image 2 du scenario principal, ou attendent deux champs texte. Elletenteimmediatementde 
definir le texte du premier champ mais cette action declenche un message d'erreur a I'execution. Le 
second champ est defini lorsque I'animation a termine I ' initial isation et execute le script dans cette 
image. Ce script a son tour appelle une fonction dans la classe. Cette fonction definit le texte du 
second champ sans probleme. 

Detruisez-vous des objets ? 

Bien quecela ne soit pas necessairement un gros probleme, il est de bon usage desuppri merles objets 
que vous avez crees lorsque vous avez fini deles utiliser. Par exemple, si lejoueur tire des bal les dans 
tous les sens a I'ecran, il peut maintenir une touche enfoncee et en decocher des milliers a la minute. 
Lorsque ces bal les quittent la portion visible de I'ecran, il est inutile de les conserver en memoire et 
de les laisser accaparer I 'attention du programme. 

Pour supprimer completement un objet, vous devez simplement vous debarrasser de toutes les 
references qui y renvoient dans vos variables et vos tableaux et utiliser removechiid pour les retirer 
desa I iste d'affichage. 

Toutes les variables sont-elles correctement typees ? 

L e typage des vari ables fait parti e des autres f acteurs qui , sans provoquer de probl erne sur le moment, 
peuvent causer bien des soucis a long terme. N'utilisez pas letype Number lorsque les types int ou 
meme uint conviennent. Ce dernier type est bien plus rapide a manipuler et consomme moins de 
memoire. Si vousstockez des milliers denombres dans des tableaux, il se peut que vous constatiez un 
certain ralentissement si vous utilisez letype Number plutot que int. 
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II y a pi re encore, si vous utilisez des variables non typees, autrement dit des variables object. Ces 
dernieres peuvent stacker desnombresetdesentiersmaisgenerent une surcharge significative. Veil I ez 
aussi a ne pas laisser passer les objets wiovieciip, qu'il serait possible de remplacer par de simples 
objets sprite a une image. 

Problemes de test 

Ces problemes sont lies a ce qui se produit durant les tests ou ce qui peut etre integre dans vos 
procedures detest. 

Devez-vous desactiver les raccourcis clavier ? 

Si vous utilisez la saisie clavier lorsquevoustestez vos animations, il se peut que vous constatiez que 
certaines touches ne respondent pas. C 'est que I'environnement de test dispose de quelques raccourcis 
clavier qui accaparent les touches concernees. 

Pour desactiver les raccourcis clavier dans I'environnement de test et permettre a votre animation de 
fonctionner commeelle leferait sur le Web, choisissez Controle > Desactiver les raccourcis clavier. 

Avez-vous effectue des tests avec d'autres cadences d'images ? 

Si vous utilisez une animation temporelle, la cadence d'images ne devrait pas importer. L'animation 
devrait avancer a vitesse constante. II vaut cependant la peine d'effectuer des tests avec une cadence 
faible, compri seentre6et 12, afin devoir ceque les u ti I i sateu rs d otes d ' o rd i n ateu rs I ents sont susceptibles 
dedecouvrir. Nous utiliserons la technique d' animation temporelle tout au long dece livre. 

Avez-vous effectue un test sur un serveur ? 

Un probleme similaire se produit lorsque vous partez du principeque les objets sonttous presents au 
debut d'une animation. En verite, les animations Flash sont diff usees en flux continu, ce qui signifie 
qu'elles commencent avant que I' ensemble du contenu multimedia ait ete charge. 

A I a difference, lorsquevoustestez une animation sur votre ordinateur local, tout I e contenu multimedia 
est instantanement charge. Lorsque vous chargez et testez l'animation sur un serveur, il se peut que 
vous constatiez qu'une portion manque pendant les quelques premieres secondes, voire les premieres 
minutes. 



Lorsque vous testez une animation, vous pouvez redemarrer I e test en choisi ssa nt Affichage > 
Simuler le telechargement. Vous pouvez aussi choisir une option du sous-menu Affichage > 
Parametres de telechargement pour definir une vitesse de telechargement si mule, comme 56 
K. L'animation redemarre alors en simulant une mise a disposition par flux continu des 
objets, a la vitesse desiree. Pour ma part, je prefere toujours faire egalement un test avec un 
veritable serveur, par securite. 
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La solution a tous ces probl ernes consiste a proposer un ecran de telechargement dont le role se I i mite 
a attendre que la total ite des elements soit chargee. Nous examinerons un exemple d'ecran de 
telechargement au C hapitre 2. 

Cette check-list devrait vous permettre d'eviter plus facilement les problemes courants et done de 
consacrer plus de temps a la creation de vos jeux et moins a denicher les bogues dans le code. 

M aintenant que nous avons traite des notions fondamentales d'ActionScript 3.0, nous etudierons au 
chapitre suivant quelques exemples courts de creation des blocs constructeurs que vous util iserez pour 
composer vos jeux. 




Composants de jeu 
ActionScript 

Au sommaire de ce chapitre : 

• Creerdesobjets visuels 

• Recuperer les entrees utilisateur 

• Creer une animation 

• Programmer interaction avec I'utilisateur 

• A cceder a des donnees externes 

• Composants de jeu divers 
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Avant de creer des jeux complets, nous allons proceder en composant de petits morceaux. Les 
programmescourtsdecechapitreoffrentunapergudecertainsdesconceptsessentielsd'ActionScri pt 3.0 
et fournissent un certain nombre de blocs constructeurs qui pourront etre utilises par la suite et dans 
vos propresjeux. 



Codes sources 

^^Oc http://flashgameu.com 

A 3G PU 02 G ameE I ements.zi p 



Creer des objets visuels 

Nos quelques premiers elements impliquent de creer et de manipuler des objets a I'ecran. Nous 
recupererons quelques clips dela bibl iotheque, lestransformeronsen boutons, dessinerons des formes 
et du texte et apprendrons a regrouper des elements dans des sprites. 

Utiliser des clips 

Lorsque vous avez un clip dans la bibliotheque et que vous souhaitez I' importer dans votrejeu, deux 
approches sont possibles. 

La premiere consiste a faire glisser le clip sur la scene et a lui donner un nom d'occurrence dans 
I'inspecteurdes proprietes. La Figure 2.1 presenteun clip place sur la scene puis nommemyciipinstance 
dans I ' i nspecteur des propri etes. 

Figure 2.1 

L'objetclip est nomine M ascot 
dans la bibliotheque, mais son 
occurrence dans la scene est 
nommee myClipInstance. 
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Ensuite, vous pouvez manipuler les proprieties du clip en faisant reference a son nom, commececi : 

myClipInstance.x = 300; 
myClipInstance.y = 200; 

La secondeapproche pour importer un clip dans votre jeu nerequiertquedu code ActionScript. Pour 
commencer, vous devez cependant rendre le clip accessible en definissant ses proprietes de liaison. 
Selectionnez le symbole dans la bibliotheque et, dans le menu deroulant du panneau B i bl i otheque, 
choisissez Liaison. Cochez I' option Exporter pour A ctionScript et indiquez le nom de la classe. Votre 
boite de dialogue devrait ressembler a eel le de la Figure 2.2. 



Figure 2.2 

La boite de dialogue Proprietes de 
liaison est parametree de maniere 
que le clip M ascot puisse etre utilise 
par le code ActionScript. 
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En general, je donne a ma classe le meme nom que celui du clip. II est ainsi plus facile de le 
retenir. 



Nous pouvons maintenantcreer de nouvel les copies du clip avec A ctionScript. La methode consistea 
creer une variable pour contenir I'instance 1 de I'objet et a utiliser addChiid pour la placer dans une 
liste d'affichage : 

var myMovieClip: Mascot = new Mascot(); 
addChild(myMovieClip) ; 

Commenousn'avonsdefini aucune autre proprier.edu clip, celui-ci apparait a I'emplacementO, 0 sur 
la scene. Nous pouvons definir son emplacement avec les proprietes x et y de I'instance. II est aussi 
possible de definir son angle de rotation avec la propriete rotation. La valeur de cette propriete 
s'exprimeen degres : 

var myMovieClip: Mascot = new Mascot(); 
myMovieClip. x = 275; 
myMovieClip. y = 150; 
myMovieClip. rotation = 10; 
addChiid (myMovieClip) ; 



1. NdT : puisqu'il s'agit ici de code, nous reprenons l'anglicisme universellement adopte dans la terminologie 
des langages de programmation. Dans l'interface Flash, on parlera plus naturellement des "occurrences" d'un 
objet. L' anglais utilise dans les deux cas le meme terme : "instance". 
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Si tout cela parait bien du travail pour un simple clip, notez qu'ActionScript permet facilement 
d'ajouter plusieurs copies d'un clip. Le code qui suit cree ainsi dix copies de I'objet Mascot, en 
changeant r emplacement horizontal de maniere a progresser de 50 pixels vers la droite a chaque fois. 
II fixe egalement I'echelle des clips a 50 % : 



for(var i=0;i<10;i++) { 

var mascot :Mascot = new Mascot(); 

mascot. x = 50*i+50; 

mascot. y = 300; 

mascot. scaleX = .5; 

mascot. scaleY = .5; 

addChild( mascot) ; 

} 



La Figure 2.3 presents le resultat de ces deux fragments decode. Le premier objet Mascot se trouve 
en haut, aux coordonnees275, 100. Les autresobjets Mascot sont repartis de 50 a 500 au niveau dela 
position verticale 300 et sont mis a I'echelle a 50 %. 



Figure 2.3 

Onze mascottes ontete 
creees et placees par le 
code ActionScript. 
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Vous trouverez cet exemple dans I' animation UsingMovieClips.fla. Le code est inclus dans I' image 1. 
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Creer des boutons 

II est egalement possible de creer des boutons en n'utilisant que du code ActionScript. Ces boutons 
peuvent etre crees a parti r de clips ou de symboles de bouton stockes dans la bibl iotheque. 

Pour transformer un clip en un bouton sur lequel I'utilisateur peut cliquer, vous n'avez qu'a lui 
attribuer un ecouteur. Le clip peut alors accepter des evenements et notamment un evenement de die 
de souris. 

Le code suivant place un nouveau clip aux coordonnees 100, 150 : 

var myMovieClip: Mascot = new Mascot(); 
myMovieClip.x = 100; 
myMovieClip. y = 150; 
addChild (myMovieClip) ; 

Pour attribuerun ecouteur, utilisez lafonction addEventListener. Incluez letyped'evenementauquel 
I' ecouteur doit repondre. II s'agitdevaleursconstantesqui varientselon letyped'objetetd'evenement. 
Dans le cas present, MouseEvent. click reagira a un die avec la souris. Ensuite, incluez egalement 
une reference a la fonction que vous allez creer pour gerer I' evenement (dans le cas present, 

clickMascot) : 

myMovieClip. addEventListener (MouseEvent .CLICK, clickMascot) ; 

La fonction clickMascot transmet simplement un message a la fenetre Sortie. Dans une application 
ou un jeu, cette fonction serait evidemment ameneea real iser des operations plus productives : 

function clickMascot(event:MouseEvent) { 
trace ("You clicked the mascot!"); 

} 

Pour mieux donnerau clip I'apparenced'un bouton, vouspouvez attribuer la valeur true a la propriete 
buttonMode de son instance. Le curseur se transforme alors en une main lorsque I'utilisateur le 
survole : 

myMovieClip. buttonMode = true; 

Vouspouvez evidemment aussi creer des instances de symboles de bouton avec du codeA ctionScript. 
Leprincipeestlememequ'avec les clips. Dans I'exemple suivant, lesymboleestlieen tantqueclasse 

LibraryButton : 

var myButton: LibraryButton = new LibraryButton ( ) ; 
myButton.x = 450; 
myButton. y = 100; 
addChild (myButton) ; 
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La principale difference entre les clips et les symboles de bouton tient a ce que les boutons possedent 
quatre images specialises dans leur scenario. La Figure 2.4 presente le scenario de notre symbole 

LibraryButton. 



Figure 2.4 

Le scriptd'un bouton 
contient quatre images 
representant les trois 
etapes du bouton etune 
zone reactive. 



<«l Layer 1 
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□ 
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La premiere image represents I'apparence du bouton lorsquelecurseur ne lesurvolepas. La seconde 
correspond a I'apparence du bouton lorsque le curseur le survole. La troisieme image definit 
I'apparence du bouton lorsque I'utilisateur a clique dessus sans avoir encore relache le bouton de la 
souris. Enfin, la derniere image correspond a la zone reactive du bouton. Elle n'est jamais visible. 



La derniere image peut inclure un graphisme plus large que le reste afin de permettre a I'uti- 
lisateur de cliquer sur le bouton ou a proxi mite du bouton. Si les images visibles du bouton 
incluent des zones vides (par exemple s'il s'agit simplement de lettres) ou possedent une 
forme bizarre, on peut donner a la derniere image une forme circulai re ou rectangulaire plus 
standard qui represente la zone reactive. Vous pouvez enfin creer des boutons invisibles en ne 
placant rien dans les images a I'exception de la derniere. 



La Figure 2.5 presente les trois etats de bouton et la zone reactive d'un clip. II ne s'agit la que d'un 
exemple. Votre bouton peut presenter toutes sortes d' etats Dessus et A baisse. 



Figure 2.5 

Les quatre images qui composent 
un symbole de bouton. 
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Vous pouvez ajouter un ecouteur au bouton de la meme maniere que vous I'avez fait avec un clip : 

myButton. addEvent Listener (MouseEvent .CLICK, clickLibraryButton) ; 
function clickLibraryButton(event:MouseEvent) { 
trace("You clicked the Library button!"); 

} 

La troisieme option pour creer un bouton consiste a utiliser le type simpieButton afin de creer un 
bouton detoutes pieces. Ou presque. II vousfauten realiteun clip pour chacunedesquatre images du 
bouton : Haut, Dessus, Abaisse et Clique. Quatre elements doivent done figurer dans la bibliotheque 
au lieu d'un. 

Pour creer ce type de bouton, uti lisez le constructeur SimpieButton. C hacun des quatre parametres de 
SimpieButton doit etre une instance de clip. Dans le cas present, nous allons utiliser quatre clips : 

ButtonUp, ButtonOver, ButtonDown et ButtonHit : 

var mySimpleButton : SimpieButton = new SimpleButton(new ButtonUpO, 
new ButtonOver( ) , new ButtonDown( ) , new ButtonHit() ) ; 
mySimpleButton. x = 450; 
mySimpleButton. y = 250; 
addChild(mySimpleButton) ; 

Vous pouvez ega I ement utiliser I e meme clip pour plusieurs des quatre parametres de simple - 
Button. Par exemple, vous pouvez reutiliser I'etat Haut du clip pour le clip Clique. Vous 
pouvez du reste utiliser le meme clip pour les quatre etats. Le bouton sera moins interessant, 
mais il necessltera moins de clips dans la bibliotheque. 



Vouspouvezcettefoisencoreajouterunecouteurau bouton que vous venezde creer avec lacommande 

addEventListener : 

mySimpleButton. addEventListener (MouseEvent .CLICK, clickSimpleButton) ; 
function clickSimpleButton(event:MouseEvent) { 
trace ("You clicked the simple button!"); 

} 

Le fichier MakingButtons.fla inclut le code deces trois boutons et transmet un message different au 
panneau Sortie lorsque I'utilisateur clique sur chacun d'entre eux. 
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Dessiner des formes 

Tous les elements a I'ecran ne doivent pas necessairement provenir de la bibl iotheque. Vous pouvez 
uti User ActionScript 3.0 pour tracer des lignes et des formes elementaires. 

Chaque objet d'affichage possede un caique graphique auquel vous pouvez acceder avec la propriete 
graphics. C'est le cas d'ailleurs de la sceneelle-meme, a laquelle vous pouvez acceder directement 
en ecrivantdu code dans le scenario principal. 

Pour dessiner uneligne simple, definissez le style de I igne, accedez au poi nt de depart de la ligne, puis 
tracez la lignejusqu'au point determinaison : 

this .graphics . lineStyle ( 2 , 0x000000 ) ; 
this. graphics. noveTo(100, 200) ; 
this. graphics. lineTo(150, 250) ; 

Ce code definit un style de ligne de 2 pixels de large etde couleur noire, puis trace la ligne en partant 
de 100, 200 pour atteindre 150, 250. 



II est egalement possible de creer une ligne courbe avec curveTo. Dans ce cas, vous devez specifier 
un point determinaison etun pointd'ancrage. Ce processus peutetreun peu compliquesi vousn'etes 
pas familiarise avec les methodes de creation des courbes de Bezier. II m'a fallu quelques tentatives 
avant de parvenir au resultat souhaite : 

this .graphics . curveTo (200 , 300 , 250 , 250) ; 

Ensuite, nous allons completer la sequence de lignes par une autre ligne droite : 

this. graphics. lineTo(300, 200) ; 

Nous venons de creer le trait presente a la Figure 2.6, compose d'une ligne droite, d'une courbe et 
d'une nouvelle ligne droite. 

II est aussi possible de dessiner des formes. La plus simple est le rectangle. La fonction drawRect 
prend une position pour le coin superieur gauche puis une largeur et une hauteur : 

this .graphics .drawRect ( 50 , 50 , 300 , 250 ) ; 




Le mot-cle this n'est pas indispensable mais, lorsque vous souhaitez que la ligne so i t des- 
si nee dans une Instance de clip specifique, vous devez I'indiquer en uti I i sa nt son nom. Par 
exemple : 



myMovieClipInstance . graphics . lineTo ( 1 50 , 250) ; 



Nous Incluerons done le mot-cle this ici afin de nous le rappeler et de rendre le code plus 
facile a reutiliser dans vos propres projets. 
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Figure 2.6 

U ne ligne, une courbe et une autre 
lignecomposentcedessin. 




Vous pouvez egalement dessiner un rectangle a bords arrondis. Les deux parametres supplemental res 
definissent la largeur et la hauteur des bords arrondis : 

this. graphics. drawRoundRect (40,40,320,270,25,25) ; 

II estaussi possible decreerun cercleet une ellipse. Lafonction drawcircie prend en parametresles 
coordonnees du centre et le rayon du cercle : 

this .graphics. drawCircle( 150, 100,20) ; 

L a f oncti on d rawEiiipse ne procede pas de I a meme mani ere, puisqu'elle prend I es memes parametres 
decoin superieur gauche etdetaille que lafonction drawRect : 

this. graphics. drawEllipse( 180, 150, 40, 70) ; 

Vous pouvez encore creer des formes remplies en commencant par une f oncti on beginFiii et un 
parametre de couleur de remplissage : 

this. graphics. beginFiii (0x333333) ; 
this .graphics . drawCircle (250 , 1 00 , 20 ) ; 

Pour cesser d'uti I iser un remplissage, executez la commande endFiii. 

La Figure 2.7 presente le resultat de I' ensemble des traces que nous venons d'effectuer. 

La plupart de ces fonctions de dessin possedent d'autres parametres. Par exemple, linestyie peut 
aussi prendre un parametre alpha afin de dessiner une ligne semi-transparente. Consultez la 
documentation pour chacune de ces fonctions si vous souhaitez en apprendre plus a ce sujet. 

Vous pourrez retrouver les precedents exemples dans le fichier d'exemple DrawingShapes.fla. 



54 ActionScript 3.0 pour les jeux 



Figure 2.7 

Deux lignes, une courbe, un cercle, 
une ellipse, un cercle rempli, un 
rectangle et un rectangle arrondi. 
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Tracer du texte 

Les exemples Hello World du Chapitre 1 ont montre comment creer des objets TextFieid afin de 
placer du texte a I'ecran. Le processus implique de creer un nouvel objet TextFieid, de definir sa 
propriete text et d'utiliser addChiid pour I'ajouter dans la scene : 

var myText: TextFieid = new TextFieid) ); 
nyText.text = "Check it out!"; 
addChild( myText) ; 

Vous pouvez egalement definir r emplacement du champ avec les proprietes x et y : 

myText. x = 50; 
myText. y = 50; 

De la meme maniere, vous pouvez definir la largeur et la hauteur du champ : 

myText. width = 200; 
myText. height = 30; 

Parfois, il peut etre difficile d'estimer la taille d'un champ texte. Une largeur de 200 peut sembler 
suffisante pour contenir le texte courant, mais pourra-t-elle contenir un autre texte si vous decidez de 
le changer ? L'un des moyensrapides devoir la taille effective d'un champ texte consiste a positionner 
la propriete border a true pendant que vous effectuez vos tests : 



myText . border = true; 
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La Figure 2.8 presente le champ texte avec une bordure afin de pouvoir en apercevoir la taille. 



Figure 2.8 

Un champ texte a 50, 50 
avec une largeur de 200 
et une hauteur de 30. 
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II convient aussi presque toujours de s'occuper de la propriete selectable. Dans la plupart des cas, 
vous ne souhaiterez pas qu'elle soit activee, or il s'agit du reglage par defaut. Si vous ignorez cette 
propriete, lecurseurdujoueursetransformeen un curseur d'edition detextelorsqu'il survolele texte 
et lui donne la possibilite de le selectionner : 

myText . selectable = false; 

Lorsque vous creerez du texte, il y a toutes les chances que vous souhaiterez definir expl icitement la 
police, la taille et le style du texte. Ces reglages ne peuvent se real iser directement. Vous devez en fait 
creer un objet TextFormat, puis positionner ses proprietes font, size et bold : 

var myFormatiTextFormat = new TextFormat ( ) ; 
nyFormat.font = "Arial"; 
myFormat.size = 24; 
myFormat.bold = true; 




Vous pouvez egalement creer un objet TextFormat avec une seule ligne de code. Par exemple, 
I'exemple precedent pourrait etre realise de la maniere suivante : 

var myFormat :TextFormat = new TextFormat (" Arial" , 24, 0x000000, true); 



La fonction constructeur TextFormat accepte jusqu'a treize parametres, mais vous pouvez 
utiliser la valeur null pour ignorer tous les parametres que vous ne souhaitez pas definir. 
Consultez la documentation pour en obtenir une liste complete. 
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Maintenant que nous avons un objet TextFormat, il existe deux moyens de I'utiliser. Le premier 
consiste a utiliser setTextFormat sur un objet TextFieid. Cette approche modifie le texte afin 
d ' uti I i ser I e sty I e co u rant. II n'estcependantpasnecessaired'y recourirachaquefoisquevouschangez 
la propriete text du champ. 

L'approche preferable dans ce cas consiste a utiliser def auitTextFormat. Vous devez lefaire avant de 
definir la propriete text. Le text suivant recupere alors les proprietes de style decrites dans 
TextFormat. En fait, a chaque fois que vous definissez le texte de cet objet TextFieid, vous utilisez 
le meme style. Cette approche sera le plus souvent la meilleure pour I'usage que nous ferons des 
champs texte lorsdu developpementdenosjeux : 

myText. def auitTextFormat = myFormat; 

La Figure 2.9 presente le champ avec son format defini. 



Figure 2.9 

Le format texte a ete defini pour 
une police Arial a 24 points 
eten gras. 
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Etudiez I' ensemble des proprietes de TextFormat dans la documentation si vous prevoyez d'etendre 
ses capacites. Vous pouvez egalement choisir d'utiliser des objets stylesheet et du texte balise en 
HTM L a I'aidede la propriete htmrrext de I'objet TextFieid. La fonctionnalite des feui lies de style 
esttres etoffee : consultez la documentation si vous souhaitez en apprendre plus a ce sujet. 



Creer du texte lie 

Qu'obtient-on en croisant un champ texte et un bouton ? Un lien hypertexte, evidemment. Ces 
elements peuventeux aussi se creer faci I ement avec du code A ctionScri pt 3.0. 
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Lemoyen le plus simplede creer du texte lie dans un TextFieid consistea utiliser la propriete htmlText 
du champ eta lui fournirdu code HTM L au lieu du texte brut utilise par la propriete text : 

var myWebLink: TextFieid = new TextField(); 

myWebLink.htmlText = "Visit <A HREF= ' http: / /flashgameu . con ' >FlashGaneU. com</A> ! " ; 
addChild (myWebLink) ; 

Cecodefonctionnecommeil leferaitdansunepageWeb, a ceci presqu'il n'existepasde modification 
de style par defaut pour le lien. II prend la meme couleur et le meme style que le reste du texte. 
Neanmoins, lorsque I ' uti I isateur clique dessus, il quittela pageWeb dans son navigateuretsetrouve 
conduit jusqu'a eel le specifies par le lien. 



v Si I ' a ni mati on F lash s' execute sous la forme d'un projecteur F lash autonome, le lien lance 
^t-^> le navigateur et conduit I'utllisateur a la page Web choisie lorsque celui-ci clique dessus. 

II Vous pouvez ega I ement specifier le para metre target de la ballses si vous en a vez I' habitude 
<a/to en HTM L. U tilisez top pour specifier la page entiere, par opposition au cadre (frame), ou_ 
blank pour ouvrir une nouvelle fenetre dans le navigateur. 



Si voussouhaitez queletexteapparaisseen bleu eten soulignecommeil leferaitdansunepageWeb 
ordinaire, vous pouvez definir une feuille de style rapide et definir la propriete stylesheet avant 

htmlText : 

var myStyleSheet: Stylesheet = new Stylesheet ( ) ; 

nyStyleSheet.setStyle("A" ,{textDecoration: "underline", color: "#0000FF"}); 
var myWebLink: TextFieid = new TextFieid) ); 
myWebLink. stylesheet = myStyleSheet; 

myWebLink.htmlText = "Visit <A HREF=' http: //flashgameu .com'>FlashGameU.com</A>! " ; 
addChild (myWebLink) ; 

La Figure 2.10 presente le texte qui utilise a la fois la propriete textFormat avec la police A rial a 24 
points eten graset stylesheet pour passer le lien en bleu et le souligner. 

Vos I iens ne doi vent pas necessai rement condui re a des pages Web. Vous pouvez les uti I i ser comme de 
simples boutons, en attribuant des ecouteurs aux champs texte afin de reagir lorsque I'utilisateur 
clique dessus. 

Pour cela, vous devez simplement utiliser event: dans la balise href du lien. Ensuite, fournissez du 
texte que votre fonction ecouteur pourra recevoir : 

myLink. htmlText = "Click <A HREF='event:testing'>here</A>"; 
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Figure 2.10 

Les proprieties defaultTextFormat 
et stylesheet ont toutes deux ete 
utilisees pour formater le texte et 
le lien. 
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Visit FlashGameU.com! 



L'ecouteur recuperera le texte "testing" sous forme dechaine dans la propri ete text del'evenement 
retourne : 

addEventListener(TextEvent.LINK, textLinkClick) ; 
function textLinkClick(event :TextEvent) { 
trace(event.text) ; 

} 

Vous pourrez ainsi definir pi usieurs liens dans un TextFieid puis faire le tri pour savoir sur lequel 
d'entre eux I'utilisateur a clique en utilisant la propriete text du parametre event. Les liens texte 
peuvent ainsi etre utilises a la manierede boutons. 

Vous pouvez aussi formater le texte avec defaultTextFormat et stylesheet comme le lien Web. Le 
fichier Creating!. inkedText.fla inclut des exemples des deux types de liens qui utilisent le meme 
format et le meme style. 



Creer des groupes de sprites 

M aintenant que vous savez creer une vari ete d' elements a I'ecran, il est temps d'entrer un peu pi us en 
matiere et de voir comment fonctionnent les objets d' affichage et les listes d'affichage. 1 1 est possible 
de creer des objets d'affichage sprite, qui n'ont d'autre role que de contenir d'autres objets 
d'affichage. 
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Le code qui suit cree un nouveau Sprite et dessine un rectangle de 200 par 200 a I'interieur. Le 
rectangle sevoit attribuer une bordure noire de2 pixels de large et un remplissage gris clair : 

var spritel :Sprite = new Sprite(); 
spritel .graphics. lineStyle(2, 0x000000) ; 
spritel .graphics. beginFill(0xCCCCCC) ; 
spritel . graphics. drawRect(0, 0,200, 200) ; 
addChild( spritel ) ; 

Le sprite peut ensuite etre positionne, avec la forme que nous avons dessinee a I'interieur, aux 
coordonnees 50, 50 dans la scene : 

spritel .x = 50; 
spritel .y = 50; 

Nous al Ions maintenant creer un second Sprite, comme I e premier, maisen le positionnant cette fois 
a 300, 100 : 

var sprite2:Sprite = new Sprite(); 
sprite2 .graphics . lineStyle ( 2 , 0x000000 ) ; 
sprite2. graphics. beginFill(0xCCCCCC) ; 
sprite2. graphics. drawRect (0,0, 200, 200) ; 
sprite2.x = 300; 
sprite2.y = 50; 
addChild(sprite2) ; 

Creons pourfinir un troi si erne Sprite, qui contiendra cette foi s un cercle. Au lieu d'utiliser addCniid 
pour le placer dans la scene, nous le placerons a I'interieur de spritel . Nous lui attribuerons en outre 
un remplissage plus fonce : 

var sprite3:Sprite = new Sprite(); 

sprite3 .graphics . lineStyle ( 2 , 0x000000 ) ; 

sprite3. graphics. beginFill (0x333333) ; 

sprite3. graphics. drawCircle( 0,0, 25) ; 

sprite3.x = 100; 

sprite3.y = 100; 

spritel .addChild(sprite3) ; 

La Figure 2.11 montrea quoi ressemblent nos trois sprites a I'ecran. Vous remarquerez que, bien que 
nous ayons fixe les proprietes x et y du cercle aux coordonnees 100, 100, ce cercle apparait a cet 
emplacement non pas relativement a la scene mais relativement au contenu de spritel . 

L'animation contient maintenant spritel et sprite2 comme enfantsde la scene. sprite3 est pour sa 
part un enfant de spritel. Si nous amenons sprite3 a devenir un enfant de sprite2, il saute au 
centre de sprite2 car la position 100, 100 est des lors relative a sprite3, son nouveau parent. 
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Figure 2.11 

Le sprite du cercle est a I'interieur 
du sprite du rectangle de gauche. 




L' animation CreatingSpriteG roups.flapermetdevisualisercemecanismeplusfacilement en pi agant 
un ecouteur sur spritei et sur sprite2. Lorsque vous cliquez sur I'un d'entre eux, sprite3 devient 
son enfant. Vous pouvez ainsi faire sauter sprite3 d'un parent a I' autre : 

spritei .addEventListener(MouseEvent. CLICK, clickSprite) ; 
sprit e2 . addEventListener(MouseEvent .CLICK, clickSprite) ; 
function clickSprite(event:MouseEvent) { 
event .currentTarget. addChild( sprit e3) ; 

} 



Cet exemple montre bi en egalement comment un ecouteur de bouton peut etre utilise pour 
plusieurs boutons. L'objet sur lequel I ' uti I i sateur clique est passe a la fonction ecouteur via 
currentTarget. Dans le cas present, nous utilisons cette valeur pour addchiid. Vous pouvez 
cependant aussi la comparer a une liste d'objets sur lesquels I ' uti I i sateur est susceptible de 
cliquer et executer du code en fonction de l'objet designe. 



Lorsdu developpement de nosjeux, nous necesseronsdecreer des groupes de sprite pour contenir 
differents types o" elements dejeu. Si nous utilisons des sprite simplement pour les caiques, nous les 
conserverons tous a 0, 0 et pourrons deplacer des elements de sprite en sprite sans changer leur 
position relative a I'ecran. 
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Definir la profondeur du Sprite 

Le moment est sans doute bien choisi pour signaler maintenant la commande setchiidindex, qui 
permet de deplacer les objets d'affichage vers le haut et le bas dans la liste d'affichage. Elle off re en 
d'autres termes la possibility deplacer un sprite au-dessus d'un autre. 

La liste d'affichage peut se comparer a un tableau qui commence par I'element 0. Si vous avez cree 
trois Sprite, ceux-ci setrouventaux positions 0, 1 et 2. La position 2 correspond au Sprite du haut, 
qui est dessi ne au-dessus des autres. 

Si vous souhaitez deplacer un sprite vers le bas, autrement dit sous les autres sprite, utilisez 
simplement la commande suivante : 

setChildIndex(nyMovieClip,0) ; 

Ce code place I'objet d'affichage myMovieciip a la position 0, tandis que tous les autres remontent 
d'un cran pour remplir I'espace laisse libre par I'objet deplace. 

II est un petit peu plus complique de placer un sprite au-dessus des autres. Vous devez attribuer a 
I'index la valeur du dernier element dans la liste d'affichage. S'il y a trois elements (0, 1 et 2), vous 
devez done lui attribuer la valeur 2. Vous pouvez lefaire a I'aide de la propriete numchiidren : 

setChildIndex(myMovieClip,numChildren-1 ) ; 

Vous devez utiliser -1 parceque, s'il existe trois enfants (0, 1 et 2), numchiidren retourne3. Oril faut 
ici utiliser 2 dans setchiidindex. Le nombre 3 genererait une erreur. 

L'animation d'exemple SettingSpriteDepth.fla place a I'ecran trois Sprite qui se superposent les 
uns aux autres. Vous pouvez cliquer sur chacun d'entre eux pour les amener au premier plan. 



Accepter les entrees de I'utilisateur 

Les sections qui suivent traitent de la recuperation des entrees du joueur. E I les proviennent toujours du 
clavier ou de la souris car il s'agit des seuls peripheriques de sai si e standard sur les ordinateurs modernes. 

Entree souris 

Nous savons deja bien comment transformer un sprite en un bouton et I 'amener a reagir aux clicsde 
souris. La souris nesertcependant pas qu'a cliquer. Vous pouvez aussi recuperer la position ducurseur 
a tout moment et les sprite peuvent detecter si le curseur les survole. 

Pour determiner a tout moment ('emplacement sur la scene du curseur, utilisez les proprietes mousex 
et mouseY. L e code qui suit recupere I 'emplacement courant du curseur et le place dans un champ texte 
a chaque image : 

addEventListener ( Event . ENTER_FRAME , showMouseLoc ) ; 
function showMouseLoc(event : Event) { 

mouseLocText.text = "X="+mouseX+" Y="+mouseY; 

} 
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Pour detecter le moment ou le curseur survole un sprite, vous pouvez proceder de la meme maniere 
que lorsque vous detectez un die de souris. Au lieu d'un die, vous devez cependant rechercher un 
evenement rollover. U n ecouteur destine a cela peut etre ajoute au sprite : 

nySprite.addEventListener(MouseEvent .R0LL_0VER, rolloverSprite) ; 
function rolloverSprite(event:MouseEvent) { 
nySprite. alpha = 1 ; 

} 

Danscettefonction, nous attribuons la valeur 1 a la propriete alpha du sprite, cequi lerend opaque 
a 100 %. Ensuite, lorsque le curseur quitte le Sprite, nous la reduisonsa 50 % : 

nySprite. addEvent Listener ( MouseEvent . R0LL_0UT, rolloutSprite) ; 
function rolloutSprite(event :MouseEvent) { 
mySprite. alpha = .5; 

} 

Dans I'animation M ousel nputfla, le Sprite commence a 50 % d'opacite et ne passe a 100 % que 
lorsque le curseur le survole. La Figure 2.12 presente les valeurs dans le champ textedel'emplacement 
du curseur etce sprite. 

Entree clavier 

L a detection des entrees clavier s'appuie sur les deux evenements clavier keyjjp et key_down. L orsque 
I'uti lisateur enfonce une touche, I e message key_down est envoye. Si vous definissez un ecouteur pour 
le surveiller, vous pouvez en tirer parti. 

La fonction addEventustener doit cependant referencer I'objet scene. En effet, les appuis sur les 
touches n'ont pas de cible evidente comme les clics de souris. Un objet doit done recevoir le focus 
clavier au demarrage del' animation. C'est a la scene que revient ce privilege : 

stage. addEvent Listener ( KeyboardEvent .KEY_DOWN, keyDownFunction) ; 

Lorsqu'une fonction recupere I'appel de cet ecouteur, el le peut acceder a plusieurs proprietes du 
parametre de I' evenement. L'un de ces parametres est charcode, qui retourne le numero de caractere 
del a touche enfoncee. 

Dans I'exemple suivant, le charcode est converti en un caractere puis affiche dans le champ texte 

keyboardText : 

function keyDownFunction(event:KeyboardEvent) { 

keyboardText. text = "Key Pressed: "+String.f romCharCode(event.charCode) ; 

} 




N'oubliez pas de sel ectionner Controle > Desactiver les raccourcis clavier au moment de vos 
tests. Sans cela, vos appuis sur les touches pourraient ne pas parvenir jusqu'a la scene. 
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Figure 2.12 

Le curseur survole le sprite, 
qui devientdonc opaque. 
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Parmi les proprieties de I'evenement figure egalement keycode, qui s'apparente a charcode mais n'est 
pas affectee par la touche M aj. Par exemple, lorsque la touche M aj est enfoncee, la toucheA donne le 
charcode65 pourunA majuscule. Lorsque la touche est relachee, lecharCodeest97, cequi represente 
un a minuscule. A la difference, keycode retourne 65 dans les deux cas. 

Parmi les autres proprietes, on peut encore citer ctriKey, shiftKey et aitKey, qui indiquent si ces 
touches de modification sont enfoncees. 

Dans les jeux, on ne se soucie general ement pas de I'appui initial sur la touche, mais du fait que le 
joueur continue a la maintenir enfoncee. Par exemple, dans un jeu de conduite, il faut savoir si le 
joueur conserve I'accelerateur enfonce, que represente la touche flechee du haut. 

Pour reconnaitre qu'une touche est enfoncee, la strategie consiste a rechercher a la fois key_down et 
key_up. Si nous detectons qu'une touche est enfoncee, nous positionnons une variable booleenne 
correspondant a true. Ensuite, lorsque la meme touche est relachee, nous la positionnons a false. 
Pour determiner a tout moment si la touche est enfoncee, il suffit des lors de verifier la valeur de la 
variable booleenne. 

Voici du code qui teste I a barred'espacedecettemaniere. La premiere foncti on reperea quel moment 
la barre d'espace est enfoncee et positionne la variable spacePressed a true : 

stage . addEventListener(KeyboardEvent .KEY_DOWN, keyDownFunction) ; 
function keyDownFunction(event:KeyboardEvent) { 
if (event. charCode == 32) { 
spacebarPressed = true; 

} 

} 
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Lafonction suivante capture I erelachementd'unetouche. S'il s'agitdela barred 'espace, keyPressed 
est positionneea false : 

stage. addEvent Listener ( KeyboardEvent .KEYJJP, keyUpFunction) ; 
function keyUpFunction(event:KeyboardEvent) { 
if (event. charCode == 32) { 
spacebarPressed = false; 

} 

} 

Cette methodepermetdesurvei Her les touches essenti el les pour lejeu, commela barred' espace et les 
quatre touches flechees. L'animation d'exemple Keyboardlnputfla surveille la barre d'espace de 
cette maniere et affiche un message lorsque son etat change. 

Entree texte 

Parmi les autres types d'objets TextFieid figure le champ de saisie. La difference entre un champ 
texte statique ou dynamique et le champ de saisie tient a ce que I'utilisateur peut selectionner et taper 
du texte dans le champ de saisie. Pour creer un TextFieid qui agit comme un champ de saisie, 
definissez simplement sa proprietetype : 

var mylnput: TextFieid = new TextFieldO; 
nylnput.type = TextFieldType. INPUT; 
addChild(mylnput) ; 

Ce code cree un champ de saisie difficile a reperer et bien mal forme dans le coin superieur gauche de 
I'ecran. II est cependant possible de I'ameliorer en definissant ses proprietes et en utilisant un objet 

TextFormat. 

Le code qui suit fixe le format a 12 points dans la police A rial, positionne le champ a 10, 10 avec une 
hauteur de 18 et une largeur de 200. II active egalement la bordure comme on s'attendrait a en voir 
pour n'importe quel champ de saisie dans un logiciel classique: 

var inputFormat : TextFormat = new TextFormat ( ) ; 
inputFornat .font = "Arial"; 
inputFormat. size = 12; 

var mylnput :TextField = new TextFieldO; 
nylnput.type = TextFieldType. INPUT; 
mylnput. def aultTextFornat = inputFornat; 
mylnput. x = 10; 
mylnput. y = 10; 
mylnput. height = 18; 
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mylnput .width = 200; 
mylnput. border = true; 
addChild (mylnput ) ; 
stage. focus = mylnput; 

La derniere ligne de code place le curseur de saisie de texte dans le champ. 

En general, les TextFieid sont configures pour ne representer qu'une seule ligne de texte. Cette 
particularite peut cependant etre modifiee avec la propriete multiline. Pour la plupart des entrees 
texte, vous n'aurez toutefois besoin qued'une seule ligne. Cela signifie que les touches Retour/E ntree 
ne seront pas reconnues, car i I n' est pas possi ble de creer une seconde I igne de texte. C ette touche peut 
neanmoins etre capturee et utilises pour signaler la fin de la saisie. 

Pour capturer la touche Retour, vous devez placer un ecouteur sur I'evenement de relachement de 
touche. Ensuite, la fonction repondante doit verifier si la touche enfoncee possede le numero de code 
13, qui correspond a la touche Retour : 

mylnput .addEventListener(KeyboardEvent .KEYJJP, checkForReturn) ; 
function checkForReturn (event :KeyboardEvent) { 
if (event. charCode == 13) { 
acceptlnput( ) ; 

} 

} 

La fonction acceptinput prend le texte du champ de saisie et lestockedans theinputText. Ensuite, 
el I e letransmet a la fenetre Sortie et supprime le champ texte : 

function acceptinput () { 

var theinputText: String = mylnput. text; 
trace(thelnputText) ; 
removeChild(mylnput) ; 

} 



En testant cette animation, je me suis rendu compte que I'envi ronnement de test interceptait 
parfois la touche Retour, meme en cochant I'option Desactiver les raccourcis clavier dans la 
barre des menus. Dans ce cas, cliquez sur la fenetre et essayez a nouveau pour obtenir le 
resultat desire. Ceproblemene doit passe poser lorsque I'animation est deployee sur leWeb. 

L'animation d'exempleTextl nput.fla contient le code precedent que vous pouvez tester directement. 
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Creer une animation 

Nous allons maintenant examiner du code ActionScript qui permet de deplacer des sprite a I'ecran. 
Nous etudierons a cette occasion quelques methodes qui permettent a ce mouvement d'i miter des 
deplacements reels. 



Mouvement des sprites 

Pour changer la position d'un sprite ou d'un clip, rien deplus simple : il suffit dedefinirsa position 
x ou y. Pour animer I'un d'entre eux, il suffit done de les modifier a intervalles reguliers. 

Gracea I'evenement enter_frame, il est possible de programmer facilement ce type de changement 
regulier. Par exemple, voici un programme court qui cree une copie d'un clip dans la bibliotheque et 
le deplace d'un pixel versladroiteachaqueimage: 

var hero: Hero = new Hero(); 
hero.x = 50; 
hero.y = 100; 
addChild(hero) ; 

addEvent Listener ( Event .ENTER_FRAME, animateHero) ; 
function animateHero(event:Event) { 
hero.x++; 

} 

Lepersonnagedu herosse deplace maintenant dans la scene, en avancant d'un pixel a lafois. Au lieu 
de progresser d'un pixel a chaque fois, vous pourriez cependant avancer de 10 avec += 10 au lieu 
de++. 

L'autre moyen defaire accelerer le heros consiste a augmenter simplement la cadence d'images. Au 
lieu des 12 ips (images par seconde) par defaut, vous pourriez par exemple passer a 60 ips. Cette 
modification s'opere dans lecoin superieur gauche de I'inspecteur des proprietes lorsque la scene est 
selectionnee. La Figure 2.13 presente I'inspecteur des proprietes lorsque la cadence d'images est fixee 
a 12 ips. 



Figure 2.13 

L'inspecteur des proprietes 
permet de modifier la cadence 
d'images de I'animation. 
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Que vous choisissiez une cadence d'images de 60 ips n'implique pas necessairement que 
' -~ I'animation tournera a 60 ips. E lie tentera seulement de le faire. S'il se passe beaucoup de 

Xchoses dans cette animation et si I'ordinateur de 1 ' util isateur est plutot lent, il n'est pas sur 
que la cadence reel I e atteigne les 60 ips. Nous traiterons sous peu des animations tempo- 
relies, qui constituent une bonne alternative aux animations a images. 



A u lieu denouscontenterdefaireglisser leherosa I'ecran, nous pouvons le faire marcher. II nousfaut 
cependant I'aided'un artiste animateur. Celui-ci doitcreer plusieurs images correspondant a un cycle 
de marcheet les placer dans des images sequentielles du clip Hero. La Figure 2.14 presentece cycle 
de marche. 



Figure 2.14 

Cycle demarche simple 
decompose en sept images. 




II ne nous reste plus qu'a reecrire la fonction animateHero afin que le personnage se deplace de 
I'image 2 a I'image 8 du clip, qui represented les sept images de I'animation. L'image 1 est reservee 
a la position statique debout. 

L'artiste animateur nous indique egalement que le personnage doit avancer de 7 pixels par image sur 
le plan horizontal afin que I'animation de la marche soit naturelle. 

Le code resultant verifie la propriete currentFrame du clip et, s'il se trouve a I'image 8, le ramene a 
I'image 2. Sans eel a, I e clip passeraitsimplementa I'image suivante : 

function animateHero(event:Event) { 
hero.x += 7; 

if (hero. currentFrame == 8) { 
hero.gotoAndStop(2) ; 
} else { 

hero.gotoAndStop(hero.currentFrame+1 ) ; 
} 

} 

Testez I'animation d'exemple SpriteMovementfla pour voir ce code en action. Testez en outre 
differentes cadences d'images pour le voir avancer plus ou moins rapidement. 
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Utiliser des Timer 

Les Timer (minuteurs) peuvent se comparer a de petites horlogesa messages. Vous en creez uneet la 
lancez, puis el le se met a cliquer et transmet des messages a intervalles definis. Par exemple, vous 
pouvez creer un Timer pour appeler une fonction specifique toutes les secondes. 

Pour definir un Timer, vous devez creer un nouvel objet Timer. Vous devez lui passer le nombre de 
millisecondes entre les evenements. Vous pouvez egalement passer un second parametre pour le 
nombre d'evenements a generer avant I 'arret, mais nous ne nous en servirons pas ici. 

Le code qui suit creeun nouveau Timer qui declenche un evenement toutes les 1 000 millisecondes (a 
chaqueseconde). II appelle la fonction timerFunction pour chacun de ces evenements : 

var myTimer: Timer = new Timer(1000); 

myTimer .addEventListener(TimerEvent .TIMER, timerFunction) ; 

Pour tester le Timer, i I suffit de I ' amener a dessi ner un petit cercl e a chaque evenement. L e parametre 
event transmis dans la fonction inclut une propriete target qui fait reference au Timer. Vous pouvez 
I'utiliser pour acceder a la propriete currentcount, qui contient le nombre defois ou le Timer a ete 
declenche. Nous uti liseronscette technique pour decaler chaque cercleet dessi ner une I ignedecercles 
de gauche a droite : 

function timerFunction(event:TimerEvent) { 
this .graphics. beginFill( 0x000000) ; 

this. graphics. drawCircle( event. target. currentCount* 10, 100, 4) ; 

} 

Le fait de creer le Timer et d'attacher un ecouteur ne suffit pas. Vous devez egalement demander au 
Timer de demarrer. Pour eel a, utilisez la commande start( ) : 

myTimer. start () ; 

L'animation UsingTimers.fla illustre lefonctionnement du code precedent. 

Vous pouvez egalement utiliser un Timer pour realiser les memes taches que eel I es presentees dans la 
precedente section avec les evenements enterFrame. Voici un Timer qui appelle la meme fonction 
animateHero pour deplacer le personnage dans I'ecran en lui faisant suivre un cycle de marche. II 

remplace I'appel addEventListener : 

var heroTimer: Timer = new Timer(80); 

he roTimer.addEvent Listener! Time rEvent .TIMER, animateHero) ; 
heroTimer. start( ) ; 

Ce code est illustre dans lefichier UsingTimers2.fla Lorsque vous I'executez, le personnage marche 
a une allure correspondant a une cadence de 12 ips. Vous pouvez cependant fixer la cadence d'images 
a 12, 6 ou 60 : la marche s'effectuera toujoursa la meme vitesse. 
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\ ' Essayez de fixer la cadence d'images a 1 ips. Avec le Timer qui deplace le personnage toutes 
! les 80 millisecondes, ce dernier fera bien du chemin entre les mises a jour de I'ecran. Cet 

exemple montre que les Timer peuvent etre utilises pour creer un mouvement identique sur 
c*/(o tous les ordinateurs jusqu'aux plus lents pour autant que les calculs realises avec chaque 
evenement Timer ne surmenent pas le processeur. 



Animation temporelle 

Les animations en temps reel impliquent que les etapes de I'animation tiennent compte du temps 
ecoule et non d'intervalles temporels arbitraires. 

Une etape d'animation temporelle doit d'abord calculer le temps ecoule depuis la derniere etape. 
Ensuite, elle deplace les objets en fonction decettedureecalculee. Par exemple, si le premier interval I e 
de temps est 0,1 secondeet le second, 0,2, les objets vont deux fois plus loin apresle second interval le 
de temps de maniere a operer une progression continue. 

La premiere chose a faire est de creer une variable qui contient le temps de la derniere etape. Nous 
commencerons par placer la mesure temporelle courante recuperee a partir de la fonction systeme 
getTimer( ). Cette fonction retourne le temps en millisecondes depuis que le lecteur Flash a demarre : 

var lastTime:int = getTiner(); 

Ensuite, nous al Ions creer un ecouteur d'evenements lie a I'evenement enter frame qui appelle 

animateBall : 

addEventListener ( Event . ENTER_FRAME , animateBall) ; 

La fonction animateBall calcule la difference temporelle et positionne la variable lastTime afin de 
preparer I' etape suivante. Elle definit ensuite I'emplacement x d'une instance de clip appelee ban. 
Elle ajoute timeDiff multiplies par 0,1. Le clip se deplace ainsi de 100 pixels toutes les 1000 
millisecondes : 

function animateBall(event:Event) { 

var timeDiff :int = getTimer( ) -lastTime; 
lastTime += timeDiff; 
ball.x += timeDiff*. 1 ; 

} 

L'animation TimeBasedAnimation.fla utilise ce code pour deplacer une ballea I'ecran. Commencez 
par I a tester avec une cadence d'images de 12 ips. Ensuite, testez-la a 60 ips. Vous remarquerez que la 
balle parvient de I'autre cote de I'ecran au meme moment, mais que le mouvement parait bien plus 
fluidea 60 ips. 
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Animation physique 

Avec les animations ActionScript, vous pouvez faire bien plus qu'amener un objet a se deplacer le 
long d'un chemin predefini. Vous pouvez aussi lui donner des propriet.es physiques et le faire bouger 
comme un objet reel. 

L'animation physique peut etre a images ou temporelle. Nous al Ions poursuivre avec un exemple 
d'animation temporelle, mais en utilisant la velocite et la gravite pour indiquer I'endroit vers lequel 
I'objet doit se deplacer. 



La gravite est une acceleration constante vers le sol (dans le cas present, vers le bas de 
I'ecran). Dans la realite, la gravite est de 9,8 metres/seconde ou de 32 pieds/seconde. Dans 
I'univers du lecteur F lash, toutse mesure en pixel par milliseconde. U ne mise a I'echelle dolt 
done etre effectuee par rapport au monde reel. Par exemple, si 1 pixel correspond a 1 metre, 
0,0098 correspond a 0,0098 metre/mllliseconde ou 9,8 metres/seconde. Vous pouvez cepen- 
dant tout aussi bien utiiiser 0,001 ou 7 ou bien encore tout autre nombre, tant que ce reglage 
para it naturel dans votre jeu. L' idee est de creer non pas des simulations scientlfiques mais 
des jeux. 



Nous fixerons la gravite a 0,0098 et definirons une velocite de depart pour I'element mouvant. La 
velocite designe tout simplement la vitesse et la direction d'un objet en mouvement. dx et dy, qui 
represented le changement des positions horizontale et verticale definissent ensemble la velocite : 

// Definition de la gravite 

var gravity: Number = .00098; 

var b: Number = .05; 

// Definition de la velocite de depart 

var dx:Number = .2; 

var dy:Number = - .8; 

L'objet (dans le cas present, une balle) doit done se deplacer de 0,2 pixel a I'horizontale toutes les 
millisecondes et de -0,8 pixel verticalement chaque milliseconde. A utrement dit, il est lance vers I e 
haut et la droite. 

Pourcontroler l'animation, nous al Ions creer un ecouteur enter frame et initialiser la variable lastTime : 
// Marquer l'instant de depart et ajouter un ecouteur 
var lastTime :int = getTimer(); 
addEvent Listener ( Event .ENTER_FRAME, animateBall) ; 
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La fonction animateBaii commence par calculer le temps ecoule depuis la derniere etape de I'animation : 

// Animation par etapes 

function animateBall(event:Event) { 

// Calculer le temps ecoule 

var timeDiff:int = getTimer( ) -lastTime; 

lastTime += timeDiff; 

La variable dy definit la vitesse verticale et doit changer selon la traction de la gravite mesuree par la 
difference temporelle : 

// Ajuster la vitesse verticale pour la gravite 
dy += gravity*timeDiff ; 

La balle sedeplaceen fonction de deux vari abl es : dx et dy . D ans I es deux cas, I a difference temporel I e 
(timeDiff) est utilises pour determiner la distance : 

// Deplacer la balle 
ball.x += timeDiff*dx; 
ball.y += timeDiff*dy; 

} 

Si vous executez I'animation PhysicsBasedAnimation.fla, vous obtiendrez un resultat comparable a 
celui dela Figure 2.15. 

Figure 2.15 

Cette capture d'ecran lente fait 
apparaitre les differentes positions 
de la balle a 12 ips. 
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Programmer ['interaction avec I'utilisateur 

Au-dela de I ' entree utilisateur et du mouvement des sprites, il est encore possible de combiner les 
deux : lorsque I' interaction de I'utilisateur affecte les elements a I'ecran. Les programmes suivants 
sont de petits exemples d'interaction de I'utilisateur avec des sprites. 

Deplacer des sprites 

Les sprites a I'ecran sedeplacent general ement avec lasourisou le clavier. Pour le clavier, cesontle 
plus souvent les touches flechees qui servent a control er I e sprite. 

Precedemmentdanscechapitre, vousavez vu comment determiner si la barred'espacea eteenfoncee. 
II est possible d'utiliser la meme procedure pour determiner si les touches flechees sont enfoncees. 
Bien que ces dernieres ne possedent pas de representation visible sous forme de caractere, el les 
peuvent etre representees par les codes detouche 37, 38, 39 et 40. La Figure 2.16 presente les quatre 
touches flechees et leurs codes correspondants. 

Figure 2.16 

Les quatre touches flechees 
peuvent etre referencees par 
ces quatre codes de touche. 



37 




40 




39 






4, 







N ous commencons par creer quatre variables booleennes pour y stacker I'etat des quatre touches flechees : 

// Initialiser les variables des touches flechees 
var leftArrow: Boolean = false; 
var rightArrow: Boolean = false; 
var upArrow: Boolean = false; 
var downArrow: Boolean = false; 

II nousfauta la fois des ecouteurs key down et key up, ainsi qu'un ecouteur enter frame pour gerer 
le emplacement du sprite a chaque mise a jour de I'ecran : 

// Definition des ecouteurs evenementiels 

stage. addEvent Listener ( KeyboardEvent .KEY_D0WN, keyPressedDown) ; 
stage. addEventListener(KeyboardEvent.KEY_UP, keyPressedUp) ; 
stage . addEvent Listener ( Event . ENTER_FRAME , noveMascot ) ; 
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Lorsque I'utilisateur enfonce unetoucheflechee, nous positionnons sa variable booleennea true : 

// Positionnement a true des variables des touches flechees 
function keyPressedDown(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if (event. keyCode == 39) { 

rightArrow = true; 
} else if (event. keyCode == 38) { 

upArrow = true; 
} else if (event. keyCode == 40) { 

downArrow = true; 

} 

} 

De la meme maniere, lorsque I'utilisateur relache les touches flechees, nous positionnons la variable 
booleenne correspondante a false : 

// Positionnement a false des variables des touches flechees 
function keyPressedUp(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = false; 
} else if (event. keyCode == 39) { 

rightArrow = false; 
} else if (event. keyCode == 38) { 

upArrow = false; 
} else if (event. keyCode == 40) { 

downArrow = false; 

} 

} 

N ous pouvons mai ntenant uti I i ser ces variables booleennes pour depl acer I e el i p de la mascotte d' une 
quantite definie dans la direction appropriee. Nous stockerons la quantite de mouvement dans la 
variable speed, au lieu de la repeter quatrefois dans lecode : 

// Deplacement a chaque image 
function moveMascot( event: Event) { 
var speed:Number = 5; 

if (leftArrow) { 

mascot. x -= speed; 

} 

if (rightArrow) { 

mascot. x += speed; 

} 

if (upArrow) { 

mascot. y -= speed; 
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} 

if (downArrow) { 

mascot. y += speed; 

} 

} 

L'animation MovingSprites.fla presente ce code en action. Vous remarquerez que, puisque nous 
testons separement chacune des variables booleennes des touches flechees, il est possible de 
combiner ces touches. Par exemple, vous pouvez appuyer sur les touches de droite et du bas pour 
faire avancer la mascotte vers le bas et la droite a la fois. Si vous maintenez les touches gauche et 
droite simultanement enfoncees, la mascotte ne se deplace pas (les deux mouvements s'annulant). 

Faire glisser des sprites 

L'un des autres moyens de deplacer un sprite dans la scene consiste a permettre a I'utilisateur de 
cliquer dessus et de le faire glisser. 

A u lieu de surveiller le clavier, nous survei Herons done cettefois la souris. Lorsque I'utilisateur clique 
sur le sprite, nous faisons commencer le glissement. Lorsque I'utilisateur relache le bouton de la 
souris, nous I'interrompons. 

Nous ne pouvons cependant pas compter sur le fait que le curseur se trouve sur le sprite lorsque 
I'utilisateur relache le bouton. Nous allons done tester I'evenement mouse_down sur le sprite 
mascot, mais I'evenement mousejjp sur la scene. 

La scene recupere en effet un evenement mousejjp que le curseur se trouve ou non sur le sprite : 

// Definition des ecouteurs 

mascot . addEvent Listener (MouseEvent . M0USE_D0WN , startMascotDrag ) ; 
stage. addEventListener(MouseEvent. MOUSEJJP, stopMascotDrag) ; 
mascot .addEvent Listener (Event .ENTER_FRAME, dragMascot) ; 

L'autrefacteur a prendre en compte est ledecalagedu curseur. Nous souhaitons permettre a I'utilisateur 
de faire glisser le sprite en saisissant n'importe quel point du sprite. Si le joueur clique sur le coin 
inferieur droit du sprite, le curseur et lecoin inferieur droit continuent deconserver la meme position 
relative pendant le glissement. 

Pour eel a, nous allons determiner le decalage entre I 'emplacement 0, 0 du sprite et I 'emplacement du 
die de souris et le stacker dans ciickoffset. Nous utiliseronsaussi cette variable pour determiner si 
un glissement se produit a ce moment. Si e'est le cas, ciickoffset se verra attribuer un objet Point. 
Sinon il sera null : 

// Decalage entre 1' emplacement du sprite et le clic 
var clickOffset: Point = null; 
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Lorsque I ' uti I i sateu r clique sur le sprite, le decalage est recupere a partir des proprietes locaix et 
locaiY de I'evenement de clic : 

// L 1 utilisateur a clique 

function startMascotDrag(event:MouseEvent) { 

clickOffset = new Point(event.localX, event. locaiY) ; 

} 

Lorsque I 'utilisateur relache le curseur, le clickOffset est ramene a nun : 

// L 1 utilisateur a relache le bouton de la souris 
function stopMascotDrag(event:MouseEvent) { 
clickOffset = null; 

} 

Ensuite, a chaque image, si clickOffset n'est pas nun, nous allons definir la position de la mascotte 
en lui attribuantremplacementcourantdu curseur auquel nous soustrayons le decalage: 

// Executer a chaque image 
function dragMascot( event: Event) { 

if (clickOffset != null) { // must be dragging 

mascot. x = mouseX - clickOf f set .x; 

mascot. y = mouseY - clickOf f set .y; 

} 

} 

Observez le fichier DraggingSprites.fla pour voir comment ce code fonctionne. Essayez de faire 
glisser la mascotte de differents points afin devoir comment ciickoff set gere ces differences. 

Detection de collisions 

U ne fois que vos objets se deplaceront a I'ecran dans votre jeu, il arrivera tres couramment que vous 
deviez verifier s'ils entrent en collision les uns avec les autres. 

ActionScript 3.0 contient deux fonctions de detection de collision natives. La fonction hitTestPoint 
teste un emplacement de point afin de voir s'il setrouvea I'interi eur d'un objet d'affichage. La fonction 
nitTestobject compare deux objets d'affichage I'un a I'autre afin devoirs'ilssechevauchent. 

Pour examiner ces deux fonctions, creons un exemple simple qui examine I'emplacement du curseur 
et I 'emplacement d'un sprite qui se deplace a chaque image : 

addEventListener ( Event . ENTER_FRAME , checkCollision) ; 

La fonction checkCollision commence par utiliser hitTestPoint en recherchant I'emplacement du 
curseur afin devoir s'il touche leclip du croissant dans la scene. Les deux premiers parametres de la 
fonction hitTestPoint sont I'emplacement x et y du point. Le troisieme parametre correspond au 
type de li mite a uti liser. L a valeur par defaut, false, signifie que seul le rectangle de contour de I 'objet 
d'affichage doit etre pris en compte. 
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A moi ns que le sprite ne possede la forme d' un rectangle, cela ne suffit pas pour la pi upart des usages 
pratiques dans les jeux. En positionnant le troisieme parametre a true, hitTestPoint utilisera cette 
fois la forme effective de I'objet d'affichage afin de determiner la collision. 

Nous placerons un texte different dans un champ texte de message selon le resultat de hitTestPoint : 

function checkCollision(event:Event) { 



// Verifier 1' emplacement du curseur par rapport au croissant 
if (crescent. hitTestPoint (mouseX, mouseY, true)) { 

messageTextl .text = "hitTestPoint: YES"; 
} else { 

messageTextl .text = "hitTestPoint: NO"; 

} 



La fonction hitTestObject ne propose pas d'option de forme. E I le ne fait que comparer les deux 
rectangles de contour des deux sprites. E I le peut cependant etre utile dans certains cas. 

Le fragment de code suivant amene un clip d'etoile a suivre le curseur et place un message different 
dans un autre champ texte si les rectangles de contour entrent en intersection : 



// Deplacer l'etoile avec la souris 
star.x = mouseX; 
star.y = mouseY; 

// Verifier si l'etoile touche le croissant 
if (star.hitTestObject(crescent) ) { 

messageText2.text = "hitTestObject: YES"; 
} else { 

messageText2.text = "hitTestObject: NO"; 

} 



L'animation d'exemple CollisionDetection.fla i I lustre cet exemple. La Figure 2.17 montre que le 
curseur se trouvea I ' i nteri eur du rectangle de contour du croissant ; comme nous testons hitTestPoint 
avec ledrapeau de forme positionneatrue, aucune collision n'estenregistreea moins que le curseur 
ne se trouve effectivement au-dessus du croissant. L'etoile et le croissant, pendant ce temps, entrent 
en collision lorsque leurs rectangles de contour entrent en intersection. 



Figure 2.17 



hitTestPoint: NO 
hitTestObject: YES 



Les emplacements du curseur 
et de l'etoile sont testes afin de 
verifier s'ils entrent en collision 
avec le croissant. 
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Acceder a des donnees externes 

Parfois, il peut etre necessaire d'acceder a des informations situees hors du jeu. Vous pouvez charger 
des parametres dejeu externes depuis des pages Web ou des champs texte. Vous pouvez egalement 
enregistrer et charger des informations localement. 

Variables externes 

Supposons que vous ayez un jeu susceptibledevarier en fonction de certaines options, comme un jeu 
depuzzlequi pourrait utiliser differentes images ou unjeud'arcadequi pourraits'executeradifferentes 
vitesses. 

Vous pouvez al i menter I esvaleurs des variables dans I 'animation Flash a partirdela page HTM L dans 
laquelle elle se trouve. 

II existeplusieursmoyensdes'y prendre. Si vousutilisez lemodeleHTM L par defaut des parametres 
de publication, vous pouvez passer des valeurs de parametre via la propriete fiashvars de la fonction 

AC FL RunContent. 



L' animation F lash est i ncorporee dans la page Web a I 'aide des balises object et embed pour 
les architectures ActiveX (Internet Explorer) et Plug-In (Firefox). Les balises object et embed 
sont cependant a leur tour ecrites par un morceau de J avaScript fourni par Adobe et livre 
dans le fichier AC_RunActiveContent.js. Selon vos parametres de publication, vous obtien- 
drez une copie de ce fichier a chaque publication. 



Voici une version raccourciedel'appel a AC_FL_RunContent que vous trouverez dans le fichier HTM L 
exporte lors de la publication depuis Flash CS3. II inclut un parametre fiashvars ajoute par messoins : 

<script language="JavaScript"> 
AC_FL_RunContent( 

1 codebase ' , 1 http : / /download . macromedia . com/pub/ shockwave/cabs/f lash/swflash . cab#version=9 ,0,0,0', 

'width 1 , '550', 

'height', '400', 

'src', ' ExternalVariables ' , 

'quality', 'high', 

' fiashvars ' , ' puzzleFile=nyfilenane . j pg&dif ficultyLevel=7 ' 

); 

</script> 
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Le format fiashvars est uneseriedepaires now de propriete = valeur separeesparlesymbole&. 
Danscet exemple, la propriete puzzieFiie se voit done attribuer la valeurmyfiiename.jpg, tandis que 
la propriete difficuityLevei regoit la valeur 7. 

Lorsque I'animation Flash demarre, el I e peut obtenir ces valeurs en utilisant I'objet Loaderinfo. La 
ligne suivante recupere tous les parametres et les place dans un objet : 

var paramObj : Object = LoaderInfo(this. root. loaderinfo) .parameters; 

Pour acceder a une valeur individuelle, il vous suffit d'utiliser une ligne de code de ce genre : 

var diff Level:String = paramObj [ "difficuityLevei" ] ; 

Vous pouvez passer n'importe quel nombre de constantes de jeu, comme des noms d'image, des 
niveaux de depart, des vitesses, des positions, etc. U n jeu de pendu peut ainsi etre configure avec un 
autremotou une autre phrase. U njeu d'exploration terrestre peutsevoirattribuer un autre emplacement 
pour le point de depart. 

Lorsdel'execution de I'animation ExternalVariables.fla, gardez a I'esprit que le principe consiste a 
charger I a page E xternalVariables.html dans votre navi gateur. C ette page conti ent tous I es parametres 
fiasnvars definis. Si vous essayez d'effectuer votre test dans Flash ou de creer une nouvelle page 
HTM L, ces parametres manqueront. 

Charger des donnees 

Le chargement de donnees depuis un fichier texte externe est relativement facile. S'il s'agit d'un 
fichier au format X M L, la procedure s'effectue memede maniere ideal e. 

Par exemple, supposons que vous souhaitiez charger une question dans un quiz a partir d'un fichier. 
Les donnees XML pourraient ressembler a ceci : 

<LoadingData> 
<question> 

<text>This is a test</text> 
<answers> 

<answer type="correct">Correct answer</answer> 
<answer type="wrong">Incorrect answer</answer> 
</answers> 
</question> 
</LoadingData> 

Pour charger les donnees, vous devez utiliser deux objets : un uRLRequest et un uRLLoader. Ensuite, 
vous effectuez une ecoute pour verifier que le chargement est complet et vous appelez I'une de vos 
propresfonctions : 

var xmlURL: URLRequest = new URLRequest ( "LoadingData.xml" ) ; 
var xmlLoader: URLLoader = new URLLoader(xmlURL) ; 
xmlLoader . addEvent Listener ( Event . COMPLETE , xmlLoaded) ; 



Chapitre 2 



Composants de jeu ActionScript 79 



Le xmiLoaded, dans le cas present, correspond simplement a des instructions trace afin de montrer 
que des donnees ont ete importees : 

function xmlLoaded( event: Event) { 

var dataXML = XML(event. target. data) ; 
trace(dataXML. question. text) ; 
trace (dataXML. question. answers. answer[0] ) ; 
trace (dataXML . question . answers . answer [ 0] . @type) ; 

} 

Vous voyez a quel point il est facile de recuperer les donnees XM L du fichier. L'objet XML etant 
dataXML, vous pouvez recuperer le texte de la question avec dataXML. question. text et la premiere 
reponse avec dataXML. question. answers [0]. Vous pouvez recuperer un attribut, comme le type de 
la reponse, en utilisant @type. 

L'exempleLoadingData.flalitsesdonneesa parti rdu fichier LoadingData.xml. Essayez demodifier 
et d'aj outer des donnees au fichier X M L. Ensuite, lancez I' animation avec les instructions trace afin 
d'acceder aux differentes parties des donnees. 

Enregistrer des donnees locales 

L'un des besoins courants en matiere de developpement de jeu consiste a stacker des donnees locales. 
Par exemple, vous pourriez stacker le precedent score du joueur ou certaines options de votrejeu. 

Pour stacker des donnees sur I'ordinateur de I ' uti I i sateur, nous allons utiliser un objet sharedObject 
local. L'acces a un snaredObject s' effectue par la meme operation que sa creation. Lefaitdedemander 
s'il existelecree. 

Pour eel a, attribuez unevariableau sharedobject d'un certain nom, avec lafonction getLocai : 

var myLocalData:SharedOb]'ect = SnaredObject. getLocal( "mygamedata" ) ; 

L'objet myLocaiData peut prendre n'importe quel nombre de proprietes de n'importe quel type: 
nombres, chaines, tableaux, autres objets, etc. 

Si vous aviez stocke les memes donnees dans une propriete de l'objet partage nomme gameinf o, vous 

pourriez y acceder avec myLocaiData. data. gameinf o : 

trace( "Found Data: "+nyLocalData.data.gameinfo) ; 

Definissez done cette propriete gameinf o, comme vous leferiez pour une variable standard : 

myLocaiData. data. gameinfo = "Store this."; 

Essayez d'executer I'animation test SavingLocalData.fla. Elle utilise la fonction trace pour afficher 
la propriete myLocaiData. data. gameinfo. Comme elle n'a pas ete definie, vous obtenez le resultat 
undefined. Ensuite, elle positionne la valeur. Lors de la seconde execution du test, vous obtenez ainsi 

"Store this . " . 
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Elements de jeu divers 

Voici quelques scripts simples qui real isent differentes taches. La plupart d'entre eux peuvent etre 
ajoutesa n'importe quelle animation dejeu en cas de besoin. 



Curseurs personnalises 

Supposons que vous souhaitiez remplacer le curseur de souris standard par un curseur qui correspond 
mieux au style devotre jeu. Ou supposons encore que vous souhaitiez un curseur plus grand pourun 
jeu d'enfant ou un curseur en forme decible pour un jeu detir. 

Si vous ne pouvez pas modifier le curseur de I'ordinateur, vous pouvez le faire disparaitre, a tout le 
moins visuellement. Ensuite, vous pouvez le remplacer par un sprite dont la position correspond a 
celledu curseur et qui flotteau-dessusdetouslesautres elements. 

Pour rendre I e curseur invisible, utilisez la commande Mouse. hide () : 
Mouse. hide() ; 

Ensuite, pour faire agir un sprite en tant que curseur, placez-le dans un caique au-dessus de tous les 
autres elements del'ecran. La Figure 2.18 presente I e scenario avec trois claques. Le curseur est leseul 
element du second caique et tous les autres elements se trouvent en dessous dans le troisieme caique. 



Figure 2.18 

Le curseur doit rester au-dessus 
de tous les autres elements a I'ecran. 
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Si vous creez des objets avec ActionScript, vous devez veiller a conserver le curseur 
au-dessus de tous les objets. La commande setchiidindex vous permet ainsi de placer 
le curseur en haut apres avoir cree les objets de votre jeu. 



Pour amener un sprite a suivre le curseur, il nous faut un ecouteur enter frame 

addEventListener( Event . ENTER_FRAME, moveCursor) ; 
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Ensuite, la commande moveCursor amene simplement I'objet arrow, qui correspond ici au nom 
d'instancedu curseur dans la scene, a suivrel' emplacement dela souris : 

function moveCursor (event: Event) { 
arrow. x = mouseX; 
arrow. y = mouseY; 

} 

Vous devez egalement positionner la propriete mouseEnabied du sprite a false. Sans cela, le curseur 
masque se trouverait toujours au-dessus du sprite du curseur et jamais au-dessus des sprites qui se 
trouvent en dessous de lui, comme un bouton : 

arrow. mouseEnabied = false; 

Sans cette I igne de code, votre bouton ne fait pas apparaitre son etat de survol lorsque vous le survolez 
etne receptionne pas correctementles dies de souris. Cette I igne decode rend le curseur personnalise 
invisible pour les evenements de souris. 

La Figure 2.19 presente le curseur personnalise qui survoleun bouton. 



Figure 2.19 

Le bouton presente son etat de 
survol bien que le sprite arrow soit 
techniquement le premier sprite sous 
I'emplacementde la souris. 




1' J l 

L'animation d'exemple C ustomC ursor.fla contient un bouton simple dans la scene afin que vous 
puissiez tester I e survol du curseur personnalise sur un bouton. 

Lire des sons 

II existedeux principaux moyens del ire des sons en ActionScript 3.0 : en tant que sons debibliotheque 
interne ou en tant que fichiers externes. 
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La meilleure methode pour la plupart des effets de son de jeu consiste a incorporer les sons dans la 
bibliotheque de I 'animation du jeu. 

Vous pouvez le faire en important le son avec la commande de menu Fichier > Importer > Importer 
dans la bibliotheque. Unefoisqueleson est dans la bibliotheque, selectionnez-leetexaminez sa boite 
de dialogue Proprietes audio (voir Figure 2.20). 

Pour utiliser un son dans votre code ActionScript, vous devez definir la liaison du son a exporter pour 
ActionScript, puis attribuer a la classe un nom que vous allez utiliser dans votre code. Pour cet 
exemple, nous utiliserons le nom soundi. 

Pour lire le son, vous n'avez des lors besoin que de deux lignes decode : 

var soundi :Sound1 = new Soundi (); 

var channel:SoundChannel = soundi .play() ; 

Si vous souhaitez etre plus concis, il est meme possible de proceder en une seule ligne : 

var channel:SoundChannel = (new Soundi ()) .play () ; 



Figure 2.20 

La boite de dialogue Proprietes audio 
permet de definir I'identificateur de 
classe pour un son afin de pouvoir 
I'utiliser dans le code ActionScript. 
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La lecture d'un fichier externe est legerement plus difficile. Pour commencer, vous devez charger le 
son dans un objet. L e code suivant charge le fichier son PlayingSounds.mp3 dans I'objet sound2 : 

var sound2:Sound = new Sound(); 

var req:URLRequest = new URLRequest ( "PlayingSounds .mp3" ) ; 
sound2.1oad(req) ; 
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Ensuite, pour lire le son, vous devez utiliser la commande play : 
sound2. play( ) ; 

L'animation d'exemple PlayingSoundsila contient deux boutons : I'un qui lit un son de bibliotheque 
etl'autrequi litun son externe. Leson externe est charge des que l'animation commence etsetrouve 
done pret a etre lu a tout moment. 



Avec certains sons externes plus longs, il est possible que le son n'ait pas fini de se charger 
avant qu'il ne so i t requis. Vous pouvez detecter ce cas en utilisant la propriete isBuffenng 
de I'objet son. Vous pouvez egalement utiliser les proprietesbytesLoac/ec/et bytes Total pour 
un suivi plus precis. 

Si le son n'a pas fini de se charger, il commencera cependant a jouer aussitot qu'il le sera. 
Pour les sons courts, il n'est done probablement pas utile de se preoccuper a ce sujet. 



Ecran de chargement 

Flash est congu pour une diffusion du contenu en flux continu. Cela signifie que l'animation ne 
commence que lorsque lecontenu minimal requisa bien etecharge, comme les elements utilises pour 
la premiere image. 

Ce mecanismeconvient a mervei lie pour les animations. Vous pouvez proposer une animation cousue 
main de 1 000 images qui demarre immediatement et continue a charger les elements requis pour les 
prochaines images a mesure que I ' uti I isateur en observe les precedentes. 

Pourlesjeux, il est cependant rare que I 'on procededecettemaniere. Leselementsdejeu sont utilises 
presque immediatement par le code ActionScript. Si I'un d'entre eux venait a manquer parce qu'il 
n'etait pas charge, le jeu pourrait ne pas fonctionner correctement. 

La plupart des j eux uti I i sent done un ecran de chargement qui force l'animation a attendre que tous 
les elements aientd'abord etetelecharges. Cet ecran contribueaussi a tenir lejoueur informede I'etat 
du tel echargement. 

L'un des moyens simples decreer un ecran decetype consistea inserer une instruction stop dans la 
premiere image de l'animation afin que celle-ci ne commence sa lecture qu'une fois que vous le lui 
aurez indique specifiquement : 

stop(); 

Ensuite, definissez un ecouteur enter frame pour appeler unefonction loadProgress a chaque image : 

addEventListener( Event. ENTER_FRAME, loadProgress) ; 
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Cette fonction recuperel'etat del' animation en utilisantthis.root.ioaderinfo. Elle a des proprietes 
bytesLoaded et bytesTotai. Nous les prendrons et les convertirons egalement en kilo-octets grace a 
une division par 1 024 : 

function loadProgress(event:Event) { 

// Recuperer les octets charges et le nombre total d 1 octets 
var movieBytesLoaded :int = this. root. loaderlnfo. bytesLoaded; 
var movieBytesTotal:int = this. root. loaderlnfo. bytesTotai; 

// Conversion en kilo-octets 

var movieKLoaded:int = movieBytesLoaded/1024; 

var movieKTotal:int = movieBytesTotal/1024; 

Pour indiquer au joueur la progression du chargement, nous plagons du texte dans un champ texte 
qui se trouve deja dans I'image 1 de I'animation. Le message donnera une information du type 

"Loading: 5K/32K" : 

// Afficher la progression 

progressText.text = "Loading: "+novieKLoaded+"K/ "+movieKTotal+"K" ; 

Lorsque movieBytesLoaded atteint movieBytesTotai, nous supprimons I'ecouteur evenementiel et 
conduisons I'animation a I'image 2. S'il s'agit du debut d'une sequence animee, vous pouvez utiliser 
gotoAndPlay a la place : 

// Avancer si OK 

if (movieBytesLoaded >= movieBytesTotai) { 

removeEventListener (Event . ENTER_FRAME, loadProgress) ; 
gotoAndStop(2) ; 

} 

} 

L' animation d'exemple LoadingScreen.fla contient ce code dans la premiere image. Elle contient 
aussi uneimagede33 Kodanslasecondeimage. Pourtestercecode,commencezpartesterl'animation 
normalement en choisissant Controle > Tester I'animation. Ensuite, dans I'environnement de test, 
choisissez A ffichage > Simuler le telechargement. Ce reglage simule un telechargement a 4,7 Ko/ 
seconde et permet de voir I'ecran de chargement en action. 

Nombres aleatoires 

L es nombres aleatoi res sont utilises dans presque tousles jeux. lis permettentderealiser des variations 
a I'infini et contribuent a si mpl ifier votre code. 

En ActionScript 3.0, la creation de nombres aleatoires s'opere avec la fonction Math. random. Elle 
retourne une valeur comprise entreO,0 et 1,0 sans inclure 1,0 lui-meme. 
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Le code suivant recupere ainsi un nombre compris entre 0,0 et 1,0 sans inclure 1,0 : 

var randoml :Nunber = Math . randon( ) ; 



Le nombre retourne est genere par un algorithme complexe dans le lecteur F lash. II semble 
etre completement aleatolre. Pourtant, etant donne qu'il s'agitd'un algorithme, il n'esttech- 
niquement pas completement aleatoire. Pour nos besoins en matiere de developpement de 
jeux, nous n'aurons cependant pas a nous en soucier et pourrons considerer que les nombres 
retournes sont completement aleatoires. 



En general, vous souhaiterez definir une plage plus specifique pour le nombre aleatoire. Par exemple, 
vous pourriez souhaiter un nombre aleatoire compris entre 0 et 10. Pour definir ces plages, il suffit de 
multiplier le resultat de Math . random par la plage concernee : 

var random2: Number = Math . random( ) *10; 

Si voussouhaitez une valeurenti ere au lieu d'un nombre a virguleflottante, uti I isez Math, floor pourarrondir 
les valeurs a rentier inferieur. Le code suivant fournit un nombre aleatoire compris entre 0 et 9 : 

var random3: Number = Math.floor(Math.random()*10) ; 

Si voussouhaitez definir une plage qui ne commence pas a 0, ajoutez lavaleurrequiseau resultat. Le 
code suivant donne un nombre aleatoire compris entre 1 et 10 : 

var random4: Number = Math.floor(Math.random()*10)+1 ; 

L'animation RanclomNumbers.fla presenteces lignesdecodeavec une sortie dans le panneau Sortie. 

Melanger un tableau 

L'un des usages les plus courants des nombres aleatoires dans les jeux consiste a configurer les pieces 
du jeu au debut d'une parti e. En general, cela implique un melange des elements du jeu, comme des 
cartes ou des pieces dejeu. 

Par exemple, supposons que vous ayez cinquante-deux pieces dejeu a melanger dans un ordre aleatoire, 
comme un croupier melangerait des cartes avant de servir une main de poker ou de blackjack. 

L'operation consiste a creer d'abord le tableau des pieces dejeu sous forme de simple tableau trie. Le 
code qui suit le fait avec les nombres 0 a 51 : 

// Creer un tableau trie 
var startDeck:Array = new Array(); 
for(var cardNum:int=0;cardNum<52;cardl\lum++) { 
startDeck.push(cardNum) ; 

} 

trace ( "Unshuf fled: " ,startDeck) ; 
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Le resultat dans la fenetre Sortie ressemble a ceci : 

Unshuffled: 0, 1 ,2,3,4,5,6,7,8,9, 10, 1 1 , 12, 13, 14, 15, 16, 17, 18, 19,20,21 ,22,23,24,25,26,27,28 
,29,30,31 ,32,33,34,35,36,37,38,39,40,41,42,43,44,45,46,47,48,49,50,51 

Pour mel anger le tableau de maniere aleatoire, nous choisissons une position aleatoi re a I'interieur et 
prenons le nombre de cette position pour le placer dans un nouveau tableau. E nsuite, nous suppri mons 
le nombre de I'ancien tableau. Nous poursuivons ainsi de maniere repetitive jusqu'a ce que I'ancien 
tableau soit vide : 

// Melange dans un nouveau tableau 
var shuffledDeck: Array = new Array(); 
while (startDeck. length > 0) { 

var r:int = Math. floor(Math. random( )*startDeck. length) ; 

shuffledDeck. push(startDeck[r] ) ; 

startDeck. splice(r,1 ) ; 

} 

trace ( "Shuffled: " , shuffledDeck) ; 

Le resultat ressemblera a ceci (il sera evidemment different a chaque fois que vous executerez le 
programme) : 

Shuffled: 3,42,40,16,41 ,44,30,27,33, 1 1 ,50,0,21 ,23,49,29,20,28,22,32,39, 25, 17, 1 9,8, 7, 1 0,3 
7,2,12,31 ,5,46,26,48,45,43,9,4,38,15,36,51 ,24,14,18,35,1 ,6,34,13,47 

L'animation d'exempleShufflingAnArray.fla presente cette procedure. 

Afficher une horloge 

II est possible d'obtenir une mesure du temps courant avec la fonction getTimer( ). Cette fonction 
indique le nombre de millisecondes qui se sont ecoulees depuis le demarrage du lecteur Flash. 

En general, les horloges internes des jeux notent le debut du jeu en pi acant la valeur gemmer ( ) a cet 
instant dans une variable. Par exemple, le jeu peut commencer 7,8 secondes apres le demarrage du 
lecteur Flash s'il a fallu ce temps a I'utilisateur pour trouver le bouton "Jouer" et cliquer dessus. La 
valeur 7800 est alors stockee dans startTime. 

Ensuite, pour obtenir la mesure temporelle a tout moment, il suffit de soustraire startume de la 
mesure de temps actuel le. 

L e joueur ne s' i nteressera cependant que rarement a des mi 1 1 isecondes brutes. 1 1 souhaitera pi utot voi r 
quelque chose comme "1:34" pour 1 minute et 34 secondes. 

La conversion des millisecondes en un format d'horloge requiert simplement une division par 1000 
pour obtenir le nombre de secondes, puis par 60 pour obtenir le nombre de minutes. 
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Voici un exemple de programme qui place un champ texte a I'ecran, capture la mesure temporelle 
au debut puis affiche I'horloge a chaque image. II convertit la mesure temporelle en secondes et en 
minutes, en inserant un zero dans le nombre de secondes s'il est inferieur a dix : 

var timeDisplay:TextField = new TextField() ; 
addChild(timeDisplay) ; 

var startTime:int = getTiner(); 
addEventListener ( Event . ENTER_FRAME , showClock) ; 

function showClock (event: Event) { 
// Millisecondes ecoulees 
var timePassed:int = getTimer( ) -startTime; 

// Calcul des minutes et des secondes 
var seconds:int = Math.floor(timePassed/1000) ; 
var minutes:int = Math.floor(seconds/60) ; 
seconds -= minutes*60; 

// Creation de la chaine d'horloge 

var tineString :String = minutest" : "+String(seconds+100) .substr(1 ,2) ; 

// Affichage dans le champ texte 
timeDisplay.text = timeString; 

} 

Examinons de plus pres la conversion de chaine. Le nombre de minutes est recupere directement a 
parti r de la variable minutes. Le signe deux-points est ajoute ensuite. 

Le nombre de secondes est gere differemment : 100 lui est ajoute, de sorte que 7 secondes devient 
107 secondes ; 52 devient 152 secondes, etc. Ensuite, il estconverti en une chaine avec leconstructeur 
string. N ous recuperons alors la sous-chaine demarrant au caractere 1 et de longueur 2. C omme nous 
commencons a compter les caracteres a partir de 0, cela signifie que nous obtenons 07 ou 52, sans 
inclure le 1 au debut de 107 ou de 152. 

Le resultat donne une chaine comme 1:07 ou 23:52. Consultez I'animation d'exemple 
DisplayingAC lock.fla pour voir ce code en action. 

Donnees systeme 

II peut souvent etre necessaire d'obtenir des informations concernant I e type d'ordinateur sur lequel 
votre jeu est execute. Ces indications pourraient affecter la maniere dont vous souhaitez que votre jeu 
gere differentes situations ou le niveau de detail que vous desirez proposer. 

Par exemple, vous pouvez recuperer la largeur et la hauteur de la scene avec les proprietes stage, 
stagewidtn et stage . stageHeignt. Ces valeurs changent meme en temps reel si I'animation est 
configuree pour s'ajuster a la tail le de la fenetre du navigateur. 
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Si votre animation est concue pour faire 640 pixels de large et que vous detectiez qu'elle se lit sur 
800 pixels de largeur, vous pouvez choisir d'afficher plus de details afin que le joueur profite de cette 
precision renforcee. Vous pouvez aussi choisir a I'inverse d'afficher moins d'images d'animation, car 
plus I'echelle est grande plus il faut de puissance pour le rendu. 

Vous pouvez encore utiliser I'objet capabilities pour obtenir differents elements d'information 
concernant I'ordinateur. Voici une liste pratique des elements qui vous affecteront le plus en tant que 
developpeurdejeux : 

• Capabilities. playerType. Retourne External si VOUS testez I'animation, StandAlone si el I e 

s' execute sous forme de projecteur Flash, piugin si el le s' execute dans un navigateur comme 
FireFox ou Safari ou ActiveX si el I e s' execute dans Internet Explorer. Vous pouvez done inserer 
dans votre code des fragments qui ne fonctionnent que si player-Type vaut External et vous 
permettent de tester votre jeu sans affecter la version Web. 

■ capabilities, language. Retourne le code a deux lettres, comme en pour I 'anglais, si I'ordinateur 
est configure de maniere a utiliser cette langue comme langue principal e. 

■ capabilities, os. Retourne le type et la version du systemed'exploitation, comme Mac os 10.4.9. 

• Capabilities. screenResolutionX, Capabilities. screenResolutionY. La resolution d'affichage, 
comme 1280 et 1024. 

Capabilities, version. La version du lecteur Flash, comme mac 9,0,45,0. Vous pouvez extraire 
la version du systemed'exploitation ou celledu lecteur dece code. 

Bien d'autres propriet.es capabilities sont disponibles. Consultez la documentation Flash CS3 a ce 
sujet. Examinez lefichier SystemData.fla pour un exemple d'animation qui recupere la plupart des 
donnees precedentes et les affiche directement dans un champ texte. 

Securite et vol des jeux 

Le vol dejeu est un veritable probleme sur Internet. La plupart des jeux ne sont pas du tout proteges 
et rien n'empeche le premier venu derecuperer lefichier SWF et de letelecharger sur son site Web en 
pretendant qu'il est le fruit de son propre labeur. 

II existe de nombreux moyens d'empecher ces agissements. Le plus simple consiste a amener votre 
jeu as' assurer qu'il s'executereellementdepuis votre serveur. Cette verification peuts'opereravec la 
propri ete this, root .loader info. uri. C el le-ci retourne I echemin completdu fichier en commencant 
par http:// si le fichier setrouve sur le Web. 

Vous pouvez ensuite operer une verification portant sur le domaine. Par exemple, pour vous assurer 
quefiashgameu.com apparaTt dans lechemin, procedez dela maniere suivante : 

if (this. root. loaderlnfo.url.indexOf ("flashgameu.com") != -1) { 

info. text = "Is playing at flashgameu.com"; 
} else { 

info. text = "Is NOT playing at flashgameu.com"; 

} 
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Au lieu de definir simplement un champ texte, vous pouvez arreter la lecture du jeu ou conduire le 
joueur a votre site avec navigateToURL. 

U nefois que vous avez securi se votre jeu au niveau de votre site, I ' etape suivante consi ste a I e securi ser 
de maniere que personne ne puisse utiliser une balise embed avec une URL absolue vers votre fichier 
SWF.Cettemethodepermeteneffetaux voleursd'incorporervotrejeudepuis votre serveurdirectement 
dans leur page Web sur leur serveur. 

II n'existe aucun moyen facile d'empecher cela mais, si vous decouvrez ce subterfuge, vous pouvez 
toujours deplacer votre fichier SWF. Vous pouvez remplacer votre fichier SWF par un autre fichier qui 
se contente de rediriger lejoueur avec navigateToURL. 



1 1 existe une autre methode pi us avancee et relati vement complexe pour empecher I a I i ai son i ncorporee. 
E I le i mpl ique de passer une val eur secrete a I 'ani mation F lash par deux biais : sous forme deparametre 
fiashvars et sous la forme d'un fragment de texte ou de donnees XML avec uRLLoader. Si les deux 
valeurs secretes nese correspondent pas, on en deduit que I'animation Flash a du etre volee. 

L'idee est de modifier regulierement la valeur passee par les deux biais. Si quelqu'un vole votre 
animation Flash mais ne recupere pas votre code HTM L pour incorporer I'animation Flash dans la 
page, votre animation ne recupere des lors pas la version fiashvars de la valeur secrete et ne peut 
fonctionner pour cette personne. 

Si la personne vole votre code HTML, el I e ne possede que la version courante de la valeur secrete 
fiashvars. Pour I' instant, cette valeur correspond a la valeur secrete URLLoader mais, une fois que 
vousaurez mis a jour la valeur secrete aux deux endroits, I'ancienne valeur fiashvars dans la pagedu 
voleur cessera de correspondre a la nouvelle valeur URLLoader de votre serveur. 

II resteevi detriment possible que le pirate vole votre jeu SWF, I'ouvreavec un decompilateur SWF et 
supprime le code de securi te. II n'existe pas de solution securi see a 100 %. La plupart des voleurs 
recherchent cependant des jeux faciles a voler. Le votre n'en fera ainsi pas partie. 

M aintenant que vous avezdecouvertquelques-unes des techniques deprogrammation A ctionScri pt 3.0 
grace aces petits blocs constructeurs de code, il est temps de passer a la realisation de votre premier jeu. 




Certains serveursWeb peuvent empecher la liaison distante. Le but estavanttout a" empecher 
les uti I i sateurs d'incorporer des images de votre serveur dans leurs pages Web. Dans de 
nombreux cas, cela fonctionne aussi avec les fichlers SWF. Renseignez-vous aupres de votre 
FAI concernant cette fonctionnal ite. 



*3 




Structure de jeu elementaire : 
le Memory 

Au sommaire de ce chapitre : 

• Placer des elements interactifs 

• Jeu 

• Encapsulerunjeu 

• Ajouter un score et un chronometre 

• Ajouter des effetsde jeu 

• M odifier lejeu 
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Codes sources 

)t>c http://flashgameu.com 

A3GPU03 MatchingGame.zip 



Pour creer votre premier jeu, j'ai choisi I'un des jeux les plus populaires que vous puissiez trouver sur 
le Web et dans I'univers du logiciel interactif et educatif : le M emory. 

Le Memory est un simple jeu de correspondance qui sejoue habituellement avec un jeu de cartes 
representant des images. L' idee consiste a placer des pai res de cartes face cacheeselon une disposition 
aleatoire. Ensuite, leou les joueursdoivent tenter de trouver des correspondances en retournant deux 
cartes de suite. Lorsquedeux cartes se correspondent, ellessont retirees. Si el I es nese correspondent 
pas, el les sont retournees (et done cachees) de nouveau. 

Les bonsjoueurs sont ceux qui memori sent les cartes apercues lorsque les cartes ne se correspondent pas 
et qui parviennent a determiner ou se trouvent les vraies pai res apres plusieurs tentatives manquees. 




Certains des jeux de correspondance educatifs pour enfants proposent non pas des corres- 
pondances exactes pour les paires de cartes mais des jeux d'association. Par exemple, une 
carte peut contenir une image de chat etsa carte correspondante, contenir le mot Chat. U ne 
carte peut afficher le numero 7 et I'autre, la somme 3+4. 



Les versions informatiques des jeux de correspondance possedent plusieurs avantages sur leurs 
equivalents physiques : vous n'avez pas besoin de recuperer, de melanger et de placer les cartes au 
debut de chaque jeu. L'ordinateur s'occupe de tout cela pour vous. II est egalement plus facile et 
moins couteux pour le developpeur du jeu de creer differentes images pour les cartes avec des cartes 
virtuelles qu'avec de vraies cartes I 

Pour creer un jeu deM emory, nousdevonsd'abord placer des cartes a I'ecran. Pour cela, nousdevons 
melanger le jeu afin que les cartes soient disposees dans un ordre aleatoire a chaque nouvelle parti e. 

Ensuite, nous devons recuperer I 'entree de I ' uti I isateur et nous en servir pour reveler les images de deux 
cartes selectionnees. N ous devons encore comparer les cartes et les retirer en cas de correspondance. 

Nous devons enfin retourner les cartes pour les cacher de nouveau lorsqu'elles ne se correspondent 
pas et verifier a quel moment toutes les paires ont ete trouvees pour que la partie puisse se terminer. 
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Placer les elements interactifs 

Pour creer un jeu de M emory, nous devons d'abord creer un jeu de cartes. Ces cartes devant aller par 
paires, il convient de determiner quel nombresera affichea I'ecran et de creer la moitiedece nombre 
d' images. 

Parexemple, si nous souhaitons afficher trente-six cartes dans le jeu, il nous fautdix-huit images, qui 
apparaitront chacune sur deux cartes. 

Methodes pour la creation des pieces du jeu 

II existe deux ecoles en matiere de creation de pieces de jeu et notamment pour la creation de cartes 
dans un jeu de M emory. 

Methode a symboles multiples 

L a premi ere methode consiste a creer chaque carte sous forme de cl i p i ndi viduel . D ans ce cas, i I y aura 
dix-huit symboles. C hacun represente une carte. 

L'un des problemes avec cette methode tient a ce qu'il y a de fortes chances pour que vous deviez 
dupliquer certains elements graphiques a I'interieur de chacun des symboles. Par exemple, chaque 
carte doit posseder la meme bordure et le motif de dos. Vous aurez ainsi dix-huit copies de la bordure 
et du dos. 

Vouspouvez evidemmentevi tercel a en creant un symbol ede dos de carte et en I'uti I isant dans chacun 
des dix-huit symboles de carte. 



Le recours aux symboles multiples peut etre utile si vous recuperez des cartes dans un groupe 
de grande tall le - par exemple si vousavez besoln de dix-huit cartes sur un jeu decent cartes. 
Cette methode peut aussi etre utile si les cartes sont Importees dans I'animation a partir de 
fichiers multimedias externes, comme une serle d'imagesj PG. 



La methode a plusieurs symboles presente cependant des inconvenients lorsqu'il s'agit d'operer des 
changements. Par exemple, supposons que vous souhaitiez redimensionner legerement les images. 
Vous devrez alors lefaire dix-huit fois pour dix-huit symboles differents. 

En outre, si vous associez vos talents de programmeur a ceux d'un graphiste, il n'est pas souhaitable 
que le graphiste ait a mettre a jour dix-huit symboles ou plus. S'il est sous contrat, vous risquez 
d'engloutir rapidementtout votre budget ! 
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Methode a symbole unique 

La seconde methode pour travailler avec une serie de pieces de jeu comme des cartes est la methode 
a symbole unique. Vous utilisez dans ce cas un symbole (un clip) avec plusieurs images. Chaque 
image contient le graphisme d'une carte differente. Les graphismes partages, comme la bordure et 
I'arri ere-plan, peuvent alors se trouver sur un caique du clip qui s'etend sur toutes les images. 

Cette methode possede d'i ndeniables avantages lorsqu' il s'agit de mettre a jour et de modifier les pieces 
du jeu. Vous pouvez aisementetrapidement vous deplacer entre les images et les editer dans le clip. Vous 
pouvez egalementrecupererfacilementun clip mis a jour par un graphisteavec lequel vous travail I ez. 

La methode a symbole unique peut el I e aussi utiliser plusieurs symboles. Par exemple, si vos 
pieces de jeu correspondent a un jeu de cartes de poker, vous pouvez placer les quatre suites 
(pique, cceur, carreau et trefle) dans des symboles et les utiliser dans le symbole principal de 
votre jeu de cartes. Ainsi, si voussouhaitez modifier I'apparence du cceur dans I e jeu de cartes 
complet, vous pouvez lefaire en ne modifiant que le symbole de cceur. 



Configurer I'animation Flash 

Grace a la methode a symbole unique, il nous faut au moins un clip dans la bibliotheque. Ce clip 
contiendra toutes les cartes et meme une image qui represente le dos de la carte que nous devons 
afficher lorsque la carte est retournee face en bas. 

Creez une nouvelle animation qui contient un unique clip appele card. Pour creer une nouvelle 
animation dans Flash CS3, choisissez Fichier> Nouveau. Une liste de types de fichiers apparait. 
Choisissez Fichier Flash (ActionScript 3.0) pour creer un fichier d'animation qui fonctionne avec le 
fichier de classeA ctionScript 3.0 que nous sommes sur le point de creer. 

Placez au moi ns dix-neuf images dans ce cl ip, I'une representant le dos des cartes et les dix-huit autres 
representant I es faces avec di ff erentes i mages. 0 uvrez I e fi chi er M atchingG amel.fla pour cet exerci ce 
si vous n'avez pas votre propre fichier de symboles a utiliser. 

La Figure 3.1 presente un scenario pour le clip card que nous utiliserons dans ce jeu. La premiere 
image correspond a I'arri ere des cartes. C'est ceque lejoueur verra lorsque la carte sera tourneeface 
en bas. E nsuite, chacune des autres i mages presente une i mage differente pour la face d'une carte. 

U ne fois qu'un symbole se trouve dans la bibliotheque, il faut le configurer pour pouvoir I'utiliser 
dans notre code A ctionScript. Pour eel a, nous devons definir ses proprietes en le selectionnant dans la 
bibliotheque et en affichant la boite de dialogue Proprietes du symbole (voir Figure 3.2). 

Tapez lenom de symbole Card et choisissez letypeClip. Pourqu'ActionScript puisse operer avec le 
clip Cards, il faut que ce dernier se voie attribuer une classe. En cochant I'option Exporter pour 
ActionScript, nous attribuons automatiquement le nom de classe Card au symbole. Cela conviendra 
parfaitement a nos besoins. 

Rien d'autre n'est requis dans I'animation Flash. Le scenario principal est entierement vide. La 
bibliotheque ne contient qu'un seul clip : Card. II ne nous manque plus que du code A ctionScript. 
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Figure 3.1 

Le clip Card est un symbole 
avec trente-sept images. 
Chaque image represents 
une carte differente. 



' j MatchingGarnel 

• j □ 



it = 



Espace de travai» fi. 4j. 1 




Figure 3.2 

La boitede dialogue 
Proprietes du symbole 
presente les proprietes 
du symbole Card. 



Proprietes du symbole 



Norn : Card 

Type: • Clip 

O Bouton 
O Graphique 

Liaison 

Identifiant : 



Classe : Card 



Classe de base : flash. display. MovieClip 

Liaison : f/1 Exporter pour AclionScnpt 

O Exporter pour le partage a I'execution 
[V] Exporter dans la premiere image 

LJ Importer pour le partage a ("execution 



URL : 



Source 



Options de base 



| Parcouhr... j Fichier :.:MatchingGame.fla 
[ Symbole. .. | Norn du symbole :Card 

| Toujours mettre a jour avant la publication 

| I Activer les reperes d'echelle a 9 decoupes 
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Creer la classe ActionScript de base 

Pour creer un fichier de classe ActionScript, choisissez Fichier > Nouveau, puis selectionnez Fichier 
ActionScript dans la liste des types defichiers. Vous creez ainsi un document ActionScript sans titre 
dans lequel vous pouvez taper votre code. 

Pour commencer un fichier ActionScript 3.0, nous devons le definir comme paquetage. C'est ce que 
fait la premiere ligne de I'exemple de code suivant : 

package { 

import flash. display.*; 

J uste apres la declaration de paquetage, nous indiquons au moteur de lecture Flash les classes requises 
pour accompli rnostaches. Dans I ecas present, nous auronsbesoind'acceder a la classe flash, display 
et a chacune de ses sous-classes i mmediates. Nous pourrons ai nsi creer et mani pul er des cl i ps comme 
les cartes. 

Vient ensuite la declaration de la classe. Le nom de la classe doit correspondre exactement a celui du 
fichier. Dans le cas present, nous I'appelons MatchingGamel . N ous devons aussi definir I'objet que cette 
classe affectera. Dans lecas present, elle affectera I'animation Flash principals qui est un clip : 

public class MatchingGamel extends MovieClip { 

Viennent ensuire les declarations des variables qui seront uti Usees dans la classe. Notre premiere 
tache, qui consiste a creer les trente-six cartes a I'ecran, est cependant si simple que nous n'aurons 
besoin d'aucune variable. Du moins pour I'instant. 

Nous pouvons done passer directement a la fonction d'initialisation, egalement appelee fonction 
constructeur. Cette fonction s' execute aussitot que la classe est creee lorsque I'animation se lit. Elle 
doit porter exactement le meme nom que la classe et I e fichier A ctionScri pt : 

public function MatchingGamel () :void { 

Cette fonction n'a pas besoin deretournerdevaleur. Nous pouvons done placer I emot-cle :void pour 
indiquer a Flash que rien nesera retourne par cette fonction. II est aussi possibledene pasmentionner 
ce mot-cle, qui est par defaut implicitement declare par le compilateur Flash. 

Dans la fonction constructeur, nous pouvons real iser la tache qui consiste a creer les trente-six cartes 
a I'ecran. Nous creerons une grille de six cartes en largeur sur sixen hauteur. 

Pour cela, nousutilisonsdeux bouclesfor imbriquees. La premiere fait avancer la variable x deO a 5. 
Lex represente la colonne dans notre grille de 6 par 6. Ensuite, la seconde boucle fait avancer y de 0 
a 5, qui represente la ligne : 

for(var x:uint=0;x<6;x++) { 

for(var y:uint=0;y<6;y++) { 

Chacune de ces deux variables est declaree de type uint, un entier non signe, juste a I'interieur de 
I'instruction for. Chacune commence par la valeur 0, puis poursuit tant que la valeur est inferieure a 
6. Elles augmentent d'une unite a chaque passage dans la boucle. 
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II existe trois types de nombres : uint, int et Number. Le type uint est concu pour tous les 
nombres entiers superieurs ou egauxa 0. Le type int est congu pour tous les nombres entiers 
qui peuvent etre posltlfs ou negatifs. Le type Number peut etre positif ou negatif, entier ou a 
virgule flottante, comme 3,5 ou -173,98. Dans les boucles for, nous utilisons generalement 
des types uint ou int car nous ne progressons que par unites completes. 



II s'agitainsi d'un moyen rapided'effectuerune boucleetdecreertrente-six clipsCard differents. La 
creation des clips se I i mite a utiliser le mot-cle new et addChiid. Nous devons aussi nous assurer que, 
lorsque chaque clip est cree, il est arrete sur sa premiere image etcorrectement positionne a I'ecran : 

var thisCard :Card = new Card(); 
thisCard.stop( ) ; 
thisCard. x = x*52+120; 
thisCard. y = y*52+45; 
addChild(thisCard) ; 

} 

} 

} 

} 

} 



L'aj out d'un symbol e dans ActionScrlpt 3.0 ne requiert que deux commandes : new, qui vous 
permet de creer une nouvelle Instance du symbol e, etaddchud, qui ajoute I' instance a la liste 
d'affichage pour la scene. Entreces deux commandes, vousdevez effectuer des taches, comme 
definir la position x ety du nouveau symbole. 



Lepositionnements'opereen fonction de la largeuretde la hauteur des cartes que nous avonscreees. Dans 
I'animation d'exemple MatchingGamel.fla, les cartes font 50 pixels sur 50 avec 2 pixels d'espacement 
entre les cartes. En multi pliant les valeurs x ety par 52, nousespagonsainsi les cartes en integrant un petit 
interstice supplements re. Nous ajoutons egalement 120 horizontal ement et 45 vertical ement, afin de 
positionner la carte a peu presau centred' une animation Flash standard de550 x400. 

Avant de tester ce code, nous devons lier I'animation Flash au fichier ActionScript. Le fichier 
ActionScript doit etre enregistre sous le nom MatchingGamel.as et situe dans le meme repertoire 
que I'animation MatchingGamel.fla. 
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Figure 3.3 

Definissez la classedu document 
del'animation Flash en I u i donnant 
le nom du fichier ActionScript 
contenant votre script principal. 




Cette operation ne suffit cependant pas a operer la liaison entre les deux. Vous devez egalement definir la 
propriete Classedu document dans I ' i nspecteur des propri etes del' animation Flash. Selectionnez I'onglet 
Propri etes de I'inspecteur des propri etes lorsque votre document d'animation MatchingGamel.fla est 
actif (voir Figure 3.3). Vous remarquerez que la classe du document est definie en bas a droite. 




Vous pouvez tester votre animation lorsque I'animation Flash elle-meme est active ou lorsque le 
document courant correspond au fichier ActionScript. Avec le fichier ActionScript, recherchez la 
liste deroulante Cible, situee en haut a droite de la fenetre Document. Elle indique I'animation 
Flash qui sera compileeetexecuteeau moment du test. Si lebonfichier n'est pas selectionne dans 
la liste, utilisez le menu deroulant pour modifier ce choix. 



La Figure 3.4 presente I'ecran apres que nous avons teste I'animation. Le moyen le plus simple 
d'effectuer le test est d'acceder au menu et de choisir Controle > Tester I'animation. 



Figure 3.4 

L'ecran presente trente-six cartes 
espacees etcentrees dans la scene. 
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Utiliser des constantes pour une meilleure programmation 

Avant de poursuivre le developpement de ce jeu, voyons comment ameliorer ce dont nous disposons 
deja. Nous allons copier I'animation existante dans le fichier MatchingGame2.fla et le code dans 
MatchingGame2.as. N'oubliez pas de modifier la classe de document de MatchingGame2.fla en 

choisissant M atchingGame2 et la declaration de classe et la fonction deconstructeur en la remplacant 

par MatchingGame2. 

Supposons que vous souhaitiez afficher non plus une grille de 6 x 6 cartes mais une grille plus simple 
de 4 x 4. Ou meme une grille rectangulaire de6 x 5. Pour eel a, il vous suffit de retrouver les boucles 
for du code precedent et de les adapter pour effectuer un nombre de passages different. 

II existe pourtant une methode encore meilleure qui consiste a retirer ces nombres specifiques du 
code. A u lieu decela, placez-lesen haut de votre code, en les etiquetant clairement, afin depouvoir 
les retrouver et les modifier aisement par la suite. 



Cette maniere d'inserer des nombres specifiques a I'interieur du code, comme le 5 pour le 
nombre de lignes et de colonnes, est appelee "coder en dur". Cette pratique est reputeecon- 
trevenir au bon usage en programmation car el I e complique les adaptations ulterieures du 
programme, notamment pour les programmeurs qui herltent d'un code qu'ils n'ont pas cree 
eux-memes et doivent pouvoir modifier. 




Plusieurs autres valeurs codees en dur figurent dans notre programme. Dressons-en la liste : 

Lignes horizontal es = 6 

L ignes verticales = 6 

Espacement horizontal =52 

Espacement vertical = 52 

Decalage ecran horizontal = 120 

Decalage ecran vertical = 45 

A u I ieu de placer ces valeurs dans le code, inserons-les dans des variables constantes dans notre classe 
afin de pouvoir les retrouver et les modifier facilement : 

public class MatchingGame2 extends MovieClip { 
// Constantes de jeu 

private static const boardWidth:uint = 6; 

private static const boardHeight:uint = 6; 

private static const cardHorizontalSpacing: Number = 52; 

private static const cardVerticalSpacing: Number = 52; 

private static const boardOffsetX:Number = 120; 

private static const boardOff setY: Number = 45; 
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Vous remarquerez que j'ai choisi private static const lors de la definition de chacune des 
constantes. Le mot-c I e private si g n i fie que ces variables nesont accessibles que depuis I'inte- 
rieur de cette classe. Lemot-cle static si gnifiequ' el les possederont la meme valeur danstoutes 
les instances de la classe. Enfin, le mot-cle const si gnifie que les valeurs ne peuvent jamais 
changer. Si vousutilisiezpuwic vara la place, vousauriez la declaration inverse : les variables 
sera ient accessibles depuis I'exterieur del a classe etcontiendraientdes valeurs differentes pour 
chacune des instances. Commeil s'agitde I 'unique instance de la classe etqu'il n'existe pas de 
script externe, il n'y a aucune difference a faire I'un ou I'autre de ces choix, mais il est plus 
soigneux de proceder comme nous I'avons fait. 



Maintenant que nous avons des constantes, nous pouvons remplacer le code dans la fonction 
constructeur afin de les utiliser au lieu de nombres codes en dur : 

public function MatchingGame2( ) : void { 
for(var x:uint=0;x<boardWidth;x++) { 

for(var y:uint=0;y<boardHeight;y++) { 
var thisCard:Card = new Card(); 
thisCard. stop( ) ; 

thisCard.x = x*cardHorizontalSpacing+boardOf f setX; 
thisCard. y = y*cardVerticalSpacing+boardOff setY; 
addChild(thisCard) ; 

} 

} 

} 

Comme vous pouvez le voir, j'ai egalement change le nom de la classe et la fonction en choisi ssant 
M atchingGame2. Ces exemples setrouventdans les fichiers M atchingG ame2.fla et M atchingG ame2.as. 



Lorsque nous avancerons dans ce chapitre, nous modifierons les noms du fichier ActionScript 
'U etde I 'animation. Si vous suivez ces etapes en creantvos propres animations de toutes pieces, 
n'oubliez pas non plus de modifier la classe du document dans I'inspecteur des proprietes 
afin que chaque animation pointe sur le bon fichier ActionScript. Par exemple, I'animation 
MatchingGame2.fla doit utiliser le fichier MatchingGame2.as, de sorte que sa classe de 
document doit etre M atchingG ame2. 



0 uvrez ces deux fichiers. Testez-lesun a un. Ensuite, testez-lesa nouveau apres avoir change certaines 
des constantes. Par exemple, limitez la hauteur (boardHeight) a cinq cartes. Faites glisser les cartes 
vers le bas de 20 pixels en modifiant boardOf f setY. Lefait que vous puissiez operer ces modifications 
rapidement et sans peine est la meilleure demonstration de I'interet des constantes. 





Chapitre 3 Structure de jeu elementaire : le Memory 1 01 



Melanger et attribuer des cartes 

Maintenant que nous pouvons ajouter des cartes a I'ecran, il faut que nous puissions attribuer 
aleatoirement I es images a chaque carte. S'il y a trente-six cartes a I'ecran, il doit done y avoir dix-huit 
paires d' images positionnees de maniere aleatoire. 

Au Chapitre 2, nous avons traite de I 'utilisation des nombres aleatoi res. Nous ne pouvons cependant 
pas nous contenter de choisir une image aleatoire pour chaque carte. Nous devons nous assurer qu'il 
y a exactement deux cartes de chaque type a I'ecran. Pas une de plus, pas une de moins. Sans eel a, 
nous n'aurons pas de veri tables paires. 



Ce processus est a peu pres inverse de celui qui consiste a melanger un jeu de cartes. Au lieu 
de melanger les cartes etde selectlonner de nouvelles cartes a partir du hautdu paquet, nous 
allons utiliser une liste ordonnee de cartes et selectlonner de nouvelles cartes a partir d'em- 
placements aleatoires du paquet. 



Pour cela, nous devons creer un tableau qui liste chaque carte, puis selectionner une carte aleatoire 
dans ce tableau. Le tableau f era trente-six elements de long etcontiendradeux exemplairesdechacune 
des dix-huit cartes. Ensuite, a mesure que nous creerons la grille de 6 x 6, nous retirerons des cartes 
du tableau et les placerons dans la grille. Lorsque nous aurons fini, le tableau sera vide et toutes les 
dix-huit paires de cartes seront prises en compte dans la grille. 

Voici le code qui permetde real isercette operation. Une variable i est declaree dans I' instruction for. 
E I le ira de zero au nombre de cartes requis. II s'agit simplement de la largeur de la grille multiplies 
par sa hauteur et divisee par deux (car chaque carte figure en deux exemplaires). Pour une grille de 
6 x 6, il y aura done trente-six cartes. Nous devons boucler dix-huit fois pour ajouter dix-huit paires 
de cartes : 

// Creation a" une liste de numeros de carte 

var cardlist: Array = new ArrayO; 

for(var i:uint=0;i<boardWidth*boardHeight/2;i++) { 

cardlist. push(i) ; 

cardlist. push(i) ; 

} 

L a commande push est utilisee pour placer deux foisun numero dans le tableau. Voici aquoi ressemblera 
I e tableau : 

0,0,1 ,1 ,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12,13,13,14,14,15,15,16,16,17,17 
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A present, lorsquenousbouclonsafin decreer lestrente-six clips, nousrecuperonsun nombre aleatoire 
dans cette liste afin de determiner I'image a afficher sur chaque carte : 

for(var x:uint=0;x<boardWidth;x++) { // Horizontal 
for(var y:uint=0;y<boardHeight;y++) { // Vertical 
var c:Card = new Card(); // Copie du clip 
c.stopO; // Arret sur la premiere image 

c.x = x*cardHorizontalSpacing+boardOff setX; // Definir la position 
c.y = y*cardVerticalSpacing+boardOff setY; 

var r:uint = Math. floor(Math.random()*cardlist. length) ; // Obtenir une face aleatoire 
c.cardface = cardlist[r]; // Attribuer la face a la carte 
cardlist .splice(r, 1 ) ; // Retirer la face de la list 
c.gotoAndStop(c.cardface+2) ; 
addChild(c); // Afficher la carte 

} 

} 

Les nouvelles lignes se trouvent au milieu du code. Pour commencer, nous utiliserons la ligne suivante 
pour obtenir un nombre aleatoire compris entre zero et le nombre d'elements qui restent dans la liste : 

var r:uint = Math. floor(Math . random( )*cardlist. length) ; 

Lafonction Math, random ( ) retourneun nombre compris entre 0,0 et 1,0 non inclus. Nous multiplions 
ce resultat pour obtenir un nombre aleatoire compris entre 0,0 et 35,9999. Ensuite, nous utilisons 
Math. floor ( ) pour arrondir ce nombre a rentier inferieur et obtenir ainsi un nombre compris entre 0 
et 35 (a tout le moins, quand il y a trente-six elements dans le tableau cardlist, au debut des 
boucles). 

Ensuite, le nombre a I' emplacement correspondant dans cardlist est attribue a une propriete de c 
nommee cardface. Puis nous utilisons la commande splice pour retirer ce nombre du tableau afin 
qu'il ne soit plus utilise de nouveau. 

Le script MatchingGame3.as inclut en outre cette ligne pour verifier que tout fonctionnej usque-la : 
c.gotoAndStop(c.cardface+2) ; 

Cette syntaxe amene le clip card a afficher son image. Ainsi, toutes les trente-six cartes seront face 
dessus plutot que face en bas. E I le prend la valeur de la propriete cardface, qui correspond a un 
nombre compris entre 0 et 17 et ajoute 2 pour obtenir un nombre compris entre 2 et 19. Cette valeur 
correspond aux images dans le clip card : I'image 1 represente le dos des cartes et les images 2 et 
suivantes, leursfaces. 
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S'il faut generalement declarer et definir des variables, II est egalement possible d'ajouter 
des proprieties dynamiques commecarc/face a un o bj et. Cela ne peut sefaire que si I'objetest 
dynamique, ce que I'objet card est par defaut car nous n'avons pas specifie le contraire. La 
propriete carcfface presuppose le type de la valeur qu'ellese voitattribuer (so\t Number, dans I e 
cas present). 

II nes'agit pas du meilleur usage en programmation. II sera it preferable de definir une classe 
pour la card, avec un fichier ActionScript declarant un paquetage, une classe, des proprier.es 
etunefonction constructeur. II s'agitcependantd'un considerable effort supplemental re lors- 
qu'une seule petite propriete est requise ; la commodite I'emporte done sur I ' i nteret de s'en 
tenir aux bonnes pratiques de la programmation. 



II n'est evidemment pas souhaitable que cette ligne de code figure dans notre jeu final, mais el I e 
est utile a ce stade pour montrer ce que nous avons accompli. La Figure 3.5 montre a quoi 
pourrait ressembler I'ecran unefois que nous executons le programme avec cette ligne detest en 
place. 



Figure 3.5 

La troisieme version de notre 
programme inclut du code 
qui revele chacune des cartes. 
C'est utile pour obtenir une 
confirmation visuelle que notre 
code fonctionne jusque-la. 
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Jeu 

A present que la grille est configuree, nous devons permettre a I'utilisateur de cliquer sur des cartes 
pour tenter de trouver des correspondances. Nous devons egalement tenir le registre de I'etat du jeu, 
ce qui implique ici de savoir si le joueur clique sur la premiere carte ou la seconde et si toutes les 
cartes ontete trouvees. 



Ajouter des ecouteurs clavier 

L a premi ere etape consi ste a amener chacune des cartes que nous creons a reagi r a des dies de souris. 
Nous pouvonslefaire en ajoutant un ecouteura chacun decesobjets. Lafonction addEventListener 
s'en charge. Elle prend deux parametres : I'evenement a ecouter et la fonction a appeler lorsque 
I'evenement se produit. Voici la ligne de code : 

c . addEventListener (MouseEvent .CLICK, clickCard) ; 

Vous devez egalement ajouter une autre instruction import au debut de la classe pour indiquer a Flash 
que vous souhaitez utiliserdesevenements : 

import flash. events.*; 

La syntaxe pour I'evenement est ici MouseEvent. click, ce qui correspond a un simple die sur la 
carte. Lorsque cet evenement se produit, la fonction clickCard est appelee. Cette fonction reste 
encore a creer. Nous devons la programmer avant de tester I'animation de nouveau car Flash ne peut 
compiler I'animation s'il manque une portion du code. 

Voici un debut simple pour la fonction clickCard : 

public function clickCard(event:MouseEvent) { 

var thisCard:Card = (event. currentTarget as Card); // Quelle carte ? 
trace(thisCard.cardface) ; 

} 

L'utilisation d'un appel a I ' i nstructi on trace peut etre un excellent moyen de verifier votre 
code afin d'avancer par petites etapes et d'eviter les maux de tete. Par exemple, si vous 
ajoutez vingt-sept lignes de code a la fois et qu'ensuite le programme ne fonctionne pas 
comme prevu, vous devez localiser le probleme dans vingt-sept nouvelles lignes de code. Si 
vous n'ajoutez que cinq nouvelles lignes decode et utilisez une instruction trace pour afficher 
les valeurs des variables cles, vous pouvez resoudre tous les problemes avec ces cinq lignes 
de code avant de passer a la suite. 
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A chaque fois qu'une fonction reagit a un evenement, el I e doit prendre au moins un parametre, a 
savoir I'evenement lui-meme. Dans lecas present, il s'agitd'unevaleur detypeMouseEvent que nous 
attribuerons a la variable event. 



( V 



Vous devez accepter le parametre a" evenement ou une fonction d'ecouteur evenementiel, 
f -~ que vous vous souciez de sa valeur ou non. Par exemple, si vous creez un unique bouton et 

Xsavez que la fonction ne s'executera que lorsquece bouton sera enfonce, vous devez malgre 
tout accepter I'evenement comme parametre, meme si vous ne I'utilisez pour rien ensuite. 



Dans le cas present, le parametre event est essentiel parce que nous devons savoir sur laquelle des 
trente-six cartes le joueur a clique. L a valeur du parametre event est en fait un objet avec toutes sortes 
depropriet.es, mais la seule chose qui nous interesse est deconnaitrel' objet card surlequel I ' uti I isateur 
a clique. II s'agit de la cibleou, plus precisement, de la propriete currentTarget de I'evenement. 

currentTarget est cependant un objet vague pour lemoteur A ctionScript a ce stade. Bien sur, il s'agit 
d'un objet card. II s'agit cependant aussi d'un clip, autrement dit d'un objet d'affichage egalement. 
Nous souhaitons obtenir sa valeur en tant qu'objet card et definissons done une variable en tant que 
card, puisutilisonsun card pour specifier que nous souhaitons que la valeur de event. currentTarget 
soit retournee sous forme de card. 

Maintenant que nous avons un objet card dans la variable tnisCard, nous pouvons acceder a sa 
propriete cardface. Nous utiliserons trace pour la placer dans la fenetre Sortie et executer un test 
rapide de MatchingGame4.fla pour nous assurer que I'animation fonctionne. 

Configurer la logique du jeu 

Lorsqu'un joueur clique sur une carte, nous devons determiner les etapes a suivre en fonction deson 
choix et de I'etat du jeu. II existe trois etats principaux a gerer : 

c Etat 1. A ucune carte n'a ete choisie, le joueur selectionne la premiere carte d'une correspondance 
possible. 

• Etat 2. Une carte a ete choisie, lejoueur selectionne une seconde carte. Unecomparaison doit etre 
operee et une action, entreprise en fonction du fait qu'il s'agit ou non d'une correspondance. 

Etat 3. Deux cartes ont ete choisies, mais aucune correspondance n'a etetrouvee. Conserver ces 
cartes face visible jusqu'a ce qu'une nouvelle carte soit choisie, puis les retourner toutes les deux 
et reveler la nouvelle carte. 

Les Figures 3.6 a 3.8 presentent les trois etats du jeu. 
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Figure 3.6 

Etatl, ou I ' uti I isateur estsur le 
point de choisir sa premiere carte. 
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Figure 3.7 

E ta 1 2 , ou I ' uti I isateu r estsur le 
point de choisir sa seconde carte. 
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D'autres considerations entrent ensuite en jeu. Que se passe-t-il si le joueur clique sur une carte puis 
cl ique sur la meme carte de nouveau ? N ous en deduisons que le joueur souhaite probablement reveni r 
sur son premier choix : nous devons retourner cette carte et reveni r au premier etat. 
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Figure 3.8 

Etat 3, ou une paire de cartes 
a ete selectionnee mais aucune 
correspondance, trouvee. 
L'utilisateur doit maintenant 
choisir une autre carte pour 
tenter de trouver une autre paire. 
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Nous devrons inevitablement tenir le registre des cartes qui ont ete choisies lorsque le joueur tombe 
sur une correspondance. Voila done I'occasion de creer nos premieres variables de classe. Nous les 
appelleronsfirstcard et secondcard. Elles seronttoutes deux detype card : 

private var firstCard:Card; 
private var secondCard:Card; 

Comme nous n'avons defini aucune valeur pour ces variables, elles commenceront toutes deux avec 
la valeur d'objet par defaut null. En fait, nous utiliserons les valeurs nun de ces deux variables pour 
determiner I' etat. 



V 



Tous les types de variables ne peuvent pas etre positionnes a nun. Par exemple, une variable 
int sera positi onnee a zero au moment de sa creation, a moins que vous ne spec ifi i ez une autre 
valeur. Vous ne pouvez pas la posltionner a nun memesi vous le souhaitez. 



Si firstcard et secondcard valent toutes deux null, nous devons nous trouver au premier etat. Le 
joueur est sur le point de choisir sa premiere carte. 

Si firstcard ne vaut pas nun et secondcard vaut null, nous nous trouvons au second etat. Le joueur 
choisira bientotla carte qu'il esperecorrespondrea la premiere. 

Si firstcard et secondcard ne valent null ni Tune ni I'autre, nous nous trouvons au troisieme etat. 
Nous utiliserons les valeurs firstcard et secondcard pour savoir quel les cartes retourner lorsque 
l'utilisateur choisira la firstcard suivante. 



1 08 ActionScript 3.0 pour les jeux 



Examinons le code : 

public function clickCard(event:MouseEvent) { 

var thisCard:Card = (event. target as Card); // Quelle carte ? 

if (firstCard == null) { // Premiere carte dans une paire 
firstCard = thisCard; // La memoriser 

firstCard. gotoAndStop(thisCard. cardface+2) ; // La retourner 

J usque-la, vous pouvez voir ce qui se passe lorsque le joueur clique sur la premiere carte. Vous 
remarquerez que la commande gotoAndstop est analogue a cell e que nous avons utilises pour tester 
le melange des cartes precedemment dans ce chapitre. Elle doit ajouter 2 au numero de I'image afin 
que les valeurs de carte comprises entre 0 et 17 correspondent aux numeros d'image compris entre 2 
et 19 qui contiennent les dix-huit faces de carte. 

A present que la valeur de firstCard est definie, nous pouvons attendre le second die. Cette etape est 
geree par les deux parties suivantes del' instruction if. Cettepartiegerelecasou lejoueur clique sur 
la premiere carte de nouveau et retourne cette carte en redonnant la valeur nun a firstCard : 

} else if (firstCard == thisCard) { // Premiere carte cliquee de nouveau 
firstCard. gotoAndStop(1 ) ; // Retourner 
firstCard = null; 

Si lejoueur clique sur une autre carte afin dedecouvrirlaseconde, unecomparaison doitetreeffectuee 
entre les deux. Nous comparons non pas les cartes elles-memes mais leur propriete cardface. Si les 
faces sont les memes, une correspondance a ete trouvee : 

} else if (secondCard == null) { // Seconde carte dans une paire 
secondCard = thisCard; // La memoriser 

secondCard. gotoAndStop(thisCard. cardface+2) ; // La retourner 

// Comparer les deux cartes 

if (firstCard. cardface == secondCard. cardface) { 

Si une correspondance a ete trouvee, nous souhaitons supprimer les cartes et reinitialiser les variables 
firstCard et secondCard : il faut pour cela utiliser la commande removecniid, qui est I'inverse de 
addcniid. E 1 1 e reti re I'objet de la liste d'affichage et le supprime de I'affichage. Dans le cas present, 
les objets se trouvent cependant toujours stockes dans des variables, aussi devons-nous les positionner 
a null pour qu'ils soient supprimes par le lecteur Flash : 

// Supprimer une correspondance 
removeChild (firstCard) ; 
removeChild(secondCard) ; 
// Reinitialiser selection 
firstCard = null; 
secondCard = null; 

} 



Chapitre 3 



Structure de jeu elementaire : le Memory 1 09 



Le cas suivant correspond a ce qui se passe si lejoueur a selectionne unefirstcard puis selectionne 
une seconde carte qui ne I ui correspond pas et cl ique a present sur une nouvel I e carte. C ette operati on 
doit retournerles deux premieres cartes en les ramenant a leur position face cachee, cequi correspond 
a I'image 1 du clip card. 

Immediatement apres, el I e doit attribuer la nouvelle carte a firstcard et afficher son image : 

} else { // Recherche d'une autre paire 

// Reinitialisation de la paire precedente 
firstCard.gotoAndStop(1 ) ; 
secondCard . gotoAndStop ( 1 ) ; 
secondCard = null; 

// Selection de la premiere carte de la paire suivante 
firstCard = thisCard; 

firstCard . gotoAndStop (thisCard . cardf ace+2) ; 

} 

} 

Voila tout, en fait, pour lejeu de base. Vous pouvez tester M atchingGame5.Ha et M atchingGame5. 

aspouryjouer.Vouspouvezselectionnerdespairesdecartesetvoir comment les cartescorrespondantes 
sont retirees de la grille. 

Ce jeu peut etre considere comme complet. Vous pourriez aisement placer une image a I'arriere-plan 
des cartes dans le scenario de I'animation principale et faire de la decouverte de I'image complete la 
recompense pour legain du jeu. Comme simple gadget dans un site Web, cela suffira parfaitement. II 
est pourtant possible d'aller bien plus loin et d'ajouter d'autres fonctionnalites. 

Verifier si la partie est finie 

Voussouhaiterez sansnul doute verifier si la partieestfiniepourrecompenserlesjoueursen affichant 
un ecran indiquant qu'ils ont termine lejeu. L'etat de fin de partie est atteint lorsque toutes les cartes 
ontetesupprimees. 



Dans les exemples de ce chapitre, nous conduisons simplement lejoueur vers un ecran qui 
affiche les mots Game Over. Vous pourriez cependant afficher une animation et conduire a 
une nouvelle page Web. Nous nous en tiendrons neanmoins ici exclusivement a ce qui con- 
cerne la programmation desjeux. 
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II existe plusieurs approches pour ce travail. Par exemple, vous pouvez avoir une nouvelle variable 
dans laquel le vous tenez le registre du nombre de paires trouvees. A chaque fois que vous trouvez une 
paire, ajoutez une unite a cette valeur, puis verifiez-la pour voir si el I e est egale au nombre total de 
pai res. 

Une autre methode consiste a verifier la propriete numchiidren de I'objet MatchingGame. Lorsque 
vous lui ajoutez trente-six cartes, numchiidren vaut 36. A mesure que des paires sont supprimees, 
numchiidren s'avance vers zero. Lorsque sa valeur atteint zero, la parti e est termi nee. 

Leproblemeavec cette methode tient a ce que si vousplacez d'autres elements dans la scene, comme 
un arriere-plan ou une barre de titre, ils sont egalement comptes dans numchiidren. 

Pour le present exemple, la premiere methode semble preferable. Au lieu de compter le nombre de 
cartes supprimees, comptons le nombre de cartes affichees. Creons une nouvelle variable de classe 
nommee cardsLeft : 

private var cardsLeft:uint; 

Ensuite, positionnons-la a zero juste avant les boucles for qui creent les cartes et ajoutons une unite 
a cette variable pour chaque carte creee : 

cardsLeft = 0; 

for(var x:uint=0;x<boardWidth;x++) { // Horizontale 
for(var y:uint=0;y<boardHeight;y++) { // Verticale 
var c:Card = new Card(); // Copier le clip 
c.stopO; // Arret sur la premiere image 

c.x = x*cardHorizontalSpacing+boardOff setX; // Definir la position 
c.y = y*cardVerticalSpacing+boardOff setY; 

var r:uint = Math. floor(Math.random()*cardlist. length); // Obtenir une face aleatoire 

c.cardface = cardlist[r]; // Attribuer face a la carte 

cardlist . splice(r, 1 ) ; // Supprimer face de la liste 

c. addEventListener(MouseEvent. CLICK, clickCard) ; // Ecouter les clics 

addChild(c); // Afficher la carte 

cardsLeft++; 

} 

} 

Nous devons ensuite aj outer du nouveau code lorsque I'utilisateur trouve une correspondance et que 
les cartes sont supprimees de I'ecran. II vient se placer dans la fonction clickCard. 

cardsLeft -= 2; 

if (cardsLeft == 0) { 

gotoAndStop( "gameover" ) ; 

} 
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\ ' Vous pouvez utiliser ++ pour aj outer une unite a une variable et -- pour la soustraire. Par 

^K~^> exemple, carcfsLeft++ equivaut a carc/s/.eft = cardsLeft + 1. 

Vous pouvez egalement utiliser += pour ajouter un nombre a une variable et -= pour le 

C»/i£> SOUStraire. Par exemple, cardsLeft -= 2 equivaut a cardsLeft = cardsLeft - 2. 



Voila tout ce dont nous avions besoin pour la programmation du code. A present, lejeu memorise le 
nombre de cartes a l'ecran a I'aidede la variable cardsLeft et intervient I orsquece nombre atteint zero. 



Figure 3.9 

L'ecran de fin de partie 
le plus simple du monde. 



*fl Match ingGame6.swf 



Fichier Affichsge Controle Deboguer 



GAME OVER 



L'action effectuee consiste a sauter a une nouvelle image comme celle presentee a la Figure 3.9. Si 
vous examinez I' animation MatchingGame6.fla, vous verrez quej'ai ajoute uneseconde image. J ' ai 
egalement ajoute des commandes stop(); a la premiere image. Elles arretent I'animation sur la 
premiere image afin que I'utilisateur puissejouer sa partie au lieu de poursuivre a I'image suivante. 
La seconde image est etiquetee gameover et sera utilisee lorsque la propriete cardsLeft vaudra zero. 

A ce stade, nous souhaitons supprimer tous les elements de jeu crees par le code. Comme lejeu ne 
cree que trente-six cartes et que toutes les trente-six cartes sont supprimees lorsque le joueur trouve 
touteslescorrespondances, il neresteneanmoinsaucun el ement supplemental re a supprimer a l'ecran. 
Nous pouvons sauter a I'image gameover sans craindre qu'il ne reste d' element a l'ecran. 

L'ecran gameover affiche les mots Game Over dans I'animation d' exemple. Vous pouvez y ajouter des 
images ou des ani mations sophi stiquees si vouslesouhaitez. Dans la suite dece chapitre, nousverrons 
comment ajouter un bouton Play Again (Rejouer) acetteimage. 
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Encapsuler le jeu 

Nous disposons maintenant d'un jeu qui s' execute sous la forme d'une animation Flash complete. 
L'animation est appelee MatchingGameX.fla et la classe ActionScript, MatchingGameX.as. 

Lorsque l'animation s' execute, le jeu s'initialise et la partie demarre. L'animation equivaut au jeu et 
lejeu, a l'animation. 

Ce dispositif fonctionne bien dans des situations simples. En pratique, il est cependant souhaitable 
d'avoir des ecrans d'introduction, des ecrans de fin de partie, des ecrans de chargement, etc. Vous 
pourriez meme souhaiter avoir differents ecrans avec differentes versions du jeu ou des jeux 
completement differents. 

Flash excel le a I 'encapsulation. Les animations Flash sont des clips et vous pouvez inserer des clips a 
I'interieur d'autres clips. Un jeu peut ainsi etre une animation ou bien un clip a I'interieur d'une 
animation. 

Pourquoi proceder de cette maniere? Pour une raison simple: il est aise d'aj outer d'autres ecrans a 
votre jeu. II est possible de faire de I'imagel un ecran d'introduction, de I' image 2 un jeu et de 
I' image 3 I 'ecran de fin de partie. 

L'image 2 contiendra en fait un clip appele MatchingGameObj ect7 qui utilise la classe M atchingG ame- 
Object7.as. 

La Figure 3.10 presente un diagramme des trois images que nous prevoyons d'inclure dans notre 
animation miseajouretdu contenu dechacuned'entre el les. 



Figure 3.10 

La seconde image de 
l'animation contient un 
clip qui correspond au jeu 
lui-meme. Les autres images 
peuventcontenir des ecrans 
divers. 



Image 1 
Ecran d'introduction 



Bouton Jouer 



Image 2 

Ecran du jeu 




Image 3 

Ecran de fin de partie 



Bouton "Rejouer" 



Creer le clip du jeu 

M atchingG ameObject7.fla contient trois images. Passons directement a la deuxieme. Elle contient 
un unique clip. Vous ne I'aurez peut-etre pas remarque au premier abord parce qu'il s'agit d'un clip 
entierement vide qui apparait done sous la forme d'un petit cercle dans le coin superieur gauche de 
I 'ecran. 

Dans la bibliotheque, ce clip est nomme MatchingGameObj ect7 et, comme le montre la Figure 3.11, 
la classe M atchingG ameObject7 lui est associee. 
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Figure 3.11 

Ce clip utilisera le fichier 
M atchingGameO bject7.as 
comme classe. 



Proprietes du symbole 



Nom : MatchingGameOb)ect7 

Type : > Clip 

1 _ 1 Bouton 
Graphique 



Liaison 

Identifiant : 

Classe : 
Classe de base : 



MatchingGameObject7 



flash . display . MovieClip 



Liaison : [7j Exporter pour AcbonScnpt 

O Exporter pour le partage a .'execution 
S] Exporter dans la premiere image 

| | Importer pour le partage a .'execution 



URL : 



Source 



Options de base 



| Parcourir... | Rchier : 
Symbole... I Nom du symbole :Symbol 1 

O Toujours mettre a pur avant la publication 

Ej Actver les reperes d'echelle a 9 decoupes 



En somme, ceclip remplacelejeu entieret I e scenario del' animation principal correspond maintenant 
a un clip plus grand qui I'englobe. 

Lorsque I' animation atteint I' image 2, I e clip MatchingGame0bject7 prend vie, execute la fonction 
constructeur de classe dans sa classe M atchingGameO bject7 .as et la lecture du jeu se lance dans ce 
clip. 

Lorsque I'animation passe a I' image 3, lejeu entier disparait car leclip n'existequ'a I'image 2. 

Cedispositif permet de pi acerdes images avant etapres lejeu (etdonc d'isolerle code du jeu afin de 
ne s'occuper que du jeu lui-meme). 



Ajouter un ecran d'introduction 

La plupartdesjeux proposentun ecran d'introduction. On prefere general ement que lejoueur ne soit 
pas immediatement plonge dans le jeu mais commence par une introduction ou puisse lire des 
instructions. 

L'ecran d'introduction contiendra du code dans I'image 1 du scenario principal. Ce code doit d'abord 
arreter I'animation afin qu' el le ne poursuive pas au-dela de I'image 1. Ensuite, il doit configurer un 
bouton afin de permettre aux utilisateurs de demarrer lejeu. 
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Si vous souhaitez conserver tout le code a I'ecart du scenario principal, vous pouvez configurer 
un nouveau fichier de classe AS comme classe de document de I'animation complete. Ce code 
s'executera a I'imagel et peut realiser les memes taches que dans le scenario principal. II est 
cependant tellement simple d'ajouter ce petit bout de code au scenario principal et d'eviter 
ainsi de creer plus de fichiers que necessaire... 



Le script de I'image doit d'abord attribuer un ecouteur a un bouton que nous allons creer dans la 
premiere image. Nous nommerons ce bouton piayButton. 

L'ecouteur evenementiel appellera la fonction startGame, qui emet simplement une commande 
gotoAndstop a destination du scenario principal afin de lui ordonner d'atteindre I'image appelee 
playgame, qui correspond a I'image 2. 

Nous placeronsegalement une commande stop dans I'image afin que, lorsque I'animation s' execute, 
el le s' arrete a I ' i mage 1 et attende quel' uti I isateur clique sur le bouton : 

piayButton . addEventListener(MouseEvent .CLICK, startGame) ; 

function startGame (event :MouseEvent) { 
gotoAndStop( "playgame" ) ; 

} 

stop(); 

Dans la seconde image setrouvera I e clip MatchingGame0bject7. Ensuite, nous devrons renommer le 
fichier AS de classe de document MatchingGameObject7.as afin qu'il soit utilise par ce clip et non 
par I'animation principal e. 



Pour creer un clip vide, accedez a la bibliotheque et choisissez Nouveau symbole dans son 
menu. Nommez le symbole, choisissez le type Clip et definissez ses proprier.es. Ensuite, faites 
glisser le clip de la bibliotheque vers la scene. Placez-le dans le coin superieur gauche afin 
que sa position 0, 0 soit la meme que la position 0, 0 de la scene. 



Nous devons operer un changement dans le code. Une reference au scenario principal est uti I i see 
lorsque la parti ese term ine. La commande gotoAndstop nefonctionneplus correctementcar lejeu se 
trouvedans leclip alors que I'image gameover setrouvedans le scenario principal. II convientdefaire 
la modification suivante : 

MovieClip(root) .gotoAndstop) "gameover" ) ; 
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\ ' Pourquoi n'est-il pas possible d'ecire simplement root. gotoAndstopc gameover" > ? Apres 
! ^ tout, root correspond bien au scenario principal etau parentdu clip. Le compi lateur ActionS- 
cript ne le permettra cependant pas. La commande gotoAndstop ne peut etre emise qu'a 
c*lb destination de clips et, techniquement, root peut etre autre chose qu'un clip, comme un clip 
a une image appele sprite. Afin de rassurer I e compi lateur sur le fait que root estun clip, nous 
le tapons done explicitement en utilisant la fonction Moviecupo. 



L'image gameover de I'animation est pour I'instant la meme que dans MatchingGame6.fla. II s'agit 
simplement d'une image contenant les mots Game Over. 

L'animation MatchingGame7.fla estun peu differente des six precedentes versions car aucuneclasse 
dedocumentnelui estassociee. E n fait, il n'existememepasdefichierMatchingGame7.as. Observez 
de pres la structure decette animation ainsi que la Figure 3.10 pour comprendre comment lejeu tient 
dans l'animation principale plus importante. 



Ajouter un bouton pour rejouer 

Dans la derniere image, nous souhaitons ajouter un autre bouton qui permette aux joueurs de rejouer. 

II suffit de dupliquer le bouton Play d'origine provenant de l'image 1. Ne vous contentez pas d'une 
operation decopier-coller.Au lieu decela, creez un duplicatadu bouton dans la bibliotheque. Ensuite, 
changez letextedu bouton en remplagantPlay par Play Again. 

Votre image gameover devrait maintenant ressembler a eel I e de la Figure 3.12. 



Figure 3.12 

L'ecran gameover contient 
maintenant un bouton Play Again. 
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Unefoisquevousavez ajoutecebouton a la troi si erne image, nommez-le piayAgainButton a I'aide 
de I'inspecteur des proprieties afin de pouvoir lui attribuer un ecouteur. Le script de I 'image devrait 
ressemblera ceci : 

piayAgainButton .addEvent Listener (MouseEvent .CLICK, playAgain) ; 

function playAgain(event:MouseEvent) { 
gotoAndStop( "playgame" ) ; 

} 

Testez MatchingGame7.fla afin de voir ces boutons en action. Vous disposez maintenant d'une 
structure dejeu tres flexible ou vous pouvez substituer du contenu dans les pages intro et gameover 
etredemarrer lejeu sans craindre que trainent des elements d'ec ran ou desvaleursdevariablerestants. 
C'etait un problemeavec ActionScript 1 et 2, maiscen'est pas lecasavec ce type de framework dans 
ActionScri pt 3.0. 



Ajouter un score et un chronometre 

Le but de ce chapitre est de developper une structure dejeu complete autour d'un jeu de M emory. 
Parmi les elements qui se rencontrent frequemment dans la plupart des jeux figurent le score et le 
chronometre. Si leprincipedu M emory nelesrequiertpasvraiment, nouslesajouteronstoutdememe 
afin de disposer des fonctionnalites les plus completes possibles. 

Ajouter le score 

Le probleme consiste a decider de la maniere de comptabiliser le score pour un jeu de ce type. II 
n'existe pas de solution evidente. II devrait cependanty avoir une recompense pour I'obtention d'une 
correspondance et eventuellement une sanction en cas d'echec. Comme il arrive presque toujours que 
lejoueur rate quelques coups de plus qu'il n'en reussit, il faut que les correspondances rapportent plus 
de points que n'en coutent les tentatives manquees. Pour commencer, on peut envisager d'attribuer 
100 points pour une correspondance et -5 en cas d'echec. 

Au lieu de coder ces montants en dur dans lejeu, ajoutons-les a la liste de constantes au debut de la 
classe : 

private static const pointsForMatch:int = 100; 
private static const pointsForMiss:int = -5; 

II nous faut maintenant un champ texte pour afficher le score. Comme vous I'avez vu au Chapitre 2, 
il est assez facile de creer un champ texte. Nous devons d'abord declarer un nouvel objet TextFieid 
dans I a I i ste des vari abl es de cl asse : 



private var ganeScoreField:TextField; 
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Ensuite, nous devons creer ce champ texte et I'aj outer comme enfant : 

gameScoreField = new TextField() ; 
addChild(ganeScoreField) ; 

Nous pourrions aussi le formater et I ' habil ler quelque peu, comme nous I'avons fait au Chapitre 2, 
mai s nous I ai sserons de cote cette tache pour I ' i nstant. 

L e score I ui-meme sera une simple variable enti ere nommee gameScore. Nous la declareronsau debut 
de la classe : 

private var ganeScore:int; 

Ensuite, nous la positionnerons a zero dans la fonction constructeur : 
gameScore = 0; 

En outre, il serait interessant d'afficher immediatement le score dans le champ texte : 

gameScoreField. text = "Score: "+String(gameScore) ; 

Nous realisons a ce stade qu'il y a au moins plusieurs endroits dans le code ou nous allons definir le 
texte de gameScoreField. Le premier est la fonction constructeur. Le second intervient apres que le 
score a change pendant que la partie est en cours. Au lieu de copier et de coller la ligne de code 
precedente a deux endroits, placons-la dans une fonction a part. Nous pourrons alors appeler la meme 
fonction depuis chacun des endroits du code ou nous devons mettre a jour le score : 

public function showGameScore( ) { 

gameScoreField. text = "Score: "+String(gameScore) ; 

} 

N ous devons changer I e code a deux endroits. L e premier vient j uste apres qu' une correspondance eut 
ete trouvee et juste avant que nous verifiions si la parti e est termi nee : 

gameScore += pointsForMatch; 

Ensuite, nous ajoutons une clause else a I' instruction if qui verifies' il y a correspondance etsoustrait 
les points en casd'echec : 

gameScore += pointsForMiss; 

Voici la section decode enti ere afin de reperer ou s'inserent cesdeux lignes : 

// Comparer les deux cartes 

if (firstCard.cardface == secondCard.cardface) { 

// Retirer une correspondance 

removeChild(firstCard) ; 

removeChild(secondCard) ; 

// Reinitialiser la selection 

firstCard = null; 
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secondCard = null; 
// Ajouter des points 
gameScore += pointsForMatch; 
showGameScore() ; 

// Verifier si la partie est terminee 
cardsLeft -= 2; // 2 cartes en moins 
if (cardsLeft == 0) { 

MovieClip(root) .gotoAndStop( "gameover" ) ; 

} 

} else { 

gameScore += pointsForMiss; 
showGameScore() ; 

} 

Vous remarquerez que nous ajoutons des points a I'aide de I'operateur +=, meme en cas de tentative 
manquee. La variable pointsForMiss vaut en effet-5 et I'ajout de-5 equivaut a soustraire 5 points. 

Nous plagons egalement I'appel a lafonction showGameScore() apres chaque changement du score. 
Nous nous assuronsainsi que lejoueur verra un score a jour, commele montre la Figure 3.13. 



Figure 3.13 

Le score apparait maintenant 
dans le coin superieur gauche 
avec la police et le style par defaut. 




M atchingG ame8.fla et M atchingG ame8.as i ncl uent ce code de score. Exami nez-les pour decouvri r 
cet exemple en action. 
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E n passa nt de MatchingGameS.fla a MatchingGame9.fla, vous devez fa i re plus que changer les 
noms defichiers. Dans I'animation, vous devez changer a la fois le nom et la classe du clip Mat- 
chingGameObject7en choisissant MatchingGameObject8. Necommettez pas I'erreur de ne changer 
que le nom du clip etde laisser la classe pointer vers MatchingGameobject7. 

Ensuite, vous devez evidemment changer le nom du fichier ActionScript pour le remplacer par 
MatchingGame8.as et changer le nom de la classe et de la fonction constructeur egalement. 

Cela vaut egalement pour les prochaines versions du jeu de M emory dans la suite du chapitre. 



Ajouter un chronometre 

L'ajout d'un chronometre est un peu plus complique que le score. Tout d'abord, le chronometre doit 
constamment etre mis a jour, a la difference du score, qui nese modifie que lorsque I ' uti I i sateu r tente 
detrouverunepaire. 

Pour inclure un chronometre, nous devons utiliser la fonction getTimer(). Elle retourne le temps 
ecouleen millisecondes depuisque I'animation Flash a demarre. II s'agit d'une fonction speciale qui 
requiertl' importation d'une classe Flash au debut de notre programme : 

import flash. utils.getTimer; 



La fonction getnmer mesure le nombre de millisecondes ecoule depuis le debut de I'anima- 
tion F lash. En general, cette mesure brute n'est cependant pas utile telle quelle car lejoueur 
ne commence pas son jeu des I'instant ou I'animation apparaft a I'ecran. getnmer est plutot 
utile lorsque Ton recupere deux mesures et soustrait la premiere a la deuxieme. C'est ce que 
nous allons faire ici : obtenir le temps ou I'utilisateur a clique sur Play et soustraire cette 
valeur au temps courant pour obtenir la duree depuis I a quel I e la partie a commence. 




II nous faut a present de nouvelles variables. Nous avons besoin d'enregistrer le temps depuis lequel 
la partie a commence. Ensuite, nous pourrons simplement soustraire cette mesure au temps courant 
pour obtenir la duree ecoulee de la partie. Nous utiliserons aussi une variable pour stacker letemps 
de partie : 

private var gameStartTime:uint; 
private var gameTime:uint; 

Nous devons aussi definir un nouveau champ texte pour afficher letemps a I'ecran : 

private var gameTimeField :TextField; 
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Dans la fonction constructeur, nous ajoutons un nouveau champ texte pour afficher le temps ecoule. 
N ous nous depl aeons en outre a droite de I'ecran pour que ce champ texte ne se trouve pas par-dessus 
celui qui affiche le score : 

gameTimeField = new TextField( ) ; 
gameTimeField.x = 450; 
addChild(gameTimeField) ; 

Avant que la fonction constructeur n'ait termine, nous souhaitons definir la variable gameStartTime. 
N ous pouvons aussi positionner gameTime a zero : 

gameStartTime = getTimer(); 
gameTime = 0; 

Nous devons maintenant trouver un moyen de mettre a jour I e temps de jeu. Ce temps change 
constamment : nous ne souhaitons done pas attendre que I ' uti I isateur agisse pour I' afficher. 

L'unedesapproches possibles consiste a creerunobjet Timer, commeauChapitre2. II n'estcependant 
pas essentiel que le chronometre soit mis a jour a interval les reguliers ; il faut simplement qu'il lesoit 
suffisamment souvent pour que lesjoueursaient un apercu precis du temps dejeu ecoule. 

Au lieu d'utiliser un Timer, nous pouvons amener I'evenement enter_frame a declarer une fonction 
qui met a jour le chronometre. Dans une animation Flash par defaut, cela se produit douze fois par 
seconde, ce qui suffit amplement : 

addEvent Listener (Event . ENTER_FRAME, showTime) ; 

II ne reste plus qu'a creer la fonction showTime. Elle calculera le temps courant en fonction de la 
valeur courante de gemmer ( ) et de la valeur de gameStartTime. E nsuite, el le placera le resultat dans 
le champ texte afin de I ' afficher : 

public function showTine(event:Event) { 
gameTime = getTimer( ) -gameStartTime; 
gameTimeField. text = "Time: "+gameTime; 

} 

La Figure 3.14 presente I'ecran avec le score etle temps dejeu. Leformatdetempsutilisecependant 
un signe deux-points et deux chiffres pour les secondes. C'est la prochaine etape que nous al Ions 
etudier. 

Afficher le temps 

La fonction showTime affiche le nombre de millisecondes depuis le debut de la parti e. Les joueurs ne 
se preoccupent generalement pas des millisecondes ; ils souhaitent pouvoir observer un affichagede 
chronometre ou d'horloge normal ou sont indiquees les minutes et les secondes, comme sur les 
montres digitales. 
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Figure 3.14 

Le temps ecoule est maintenant 
affiche en hauta droite. 




Decomposons cette tiche en une autre foncti on. Au lieu d'inclure directement dans I e champ texte la 
mesure brute gameTime comme dans I'exemple de code precedent, nous pouvons appeler unefonction 
permettant de retourner une sortie plus elegante : 

gameTimeField.text = "Time: " +clockTime( gameTime ) ; 

Quand I'ancien code affiche ceci : 

Time: 123726 

L e nouveau code affiche cette fois : 

Time: 2:03 

La fonction ciockTime recupere le temps en millisecondes brutes et le convertit en minutes et en 
secondes entieres. En outre, elle formate cette mesure en utilisantun signe deux-points (:) ets' assure 
qu'un zero est correctement place lorsque le nombre de secondes est inferieur a dix. 

La fonction commence en divisant simplement le nombre de millisecondes par 1 000 afin d'obtenir le 
nombre de secondes. Elle divise ensuite ce resultat par 60 pour obtenir le nombre de minutes. 

Ensuite, elledoitsoustrairelesminutesdessecondes. Parexemple, 123 secondes remplissent 2 minutes. 
En soustrayant 2 x60 a 123, on obtient 3 secondes restantes. 123 correspond done a 2 minutes et 
3 secondes : 

public function ciockTime (ms:int) { 

var seconds:int = Mat h. f loo r(ms/ 1000) ; 
var minutes:int = Math.floor(seconds/60) ; 
seconds ■= minutes*60; 
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A present que nous avons le nombre de minutes et de secondes, nous devons inserer un signe deux-points 
entre les deux et veiller a ce que les secondes soient toujours exprimees a I'aide de deux chiffres. 

Je me sers d'une astuce pour cela. La fonction substr permet de recuperer un nombre defini de 
caracteres d'une chaine. Le nombre de secondes sera compris entre 0 et 59. Ajoutez-y 100 et vous 
obtenez un nombre compris entre 100 et 159. Recuperez le second et le troisieme caractere de ce 
nombre sous forme de chaine et vous obtenez un nombre de secondes a deux chiffres compris entre 
00 et 59. Voici comment setraduitceci en ActionScript : 

var timeString: String = minutest" : "+String(seconds+100) . substr(1 ,2) ; 

Ensuite, nous retournons simplement la valeur : 

return timeString; 

} 

Le temps ecoule s'affiche maintenant en hautde I'ecran dans un format numeriquefami I ierau lieu de 
representer un nombre rebarbatif de millisecondes. 

Afficher le score et le temps une fois la partie terminee 

Avant d'en terminer avec MatchingGame9.fla, recuperons les nouveaux affichages du score et du 
temps et transportons-les dans I'ecran gameover. 

Cette operation est un peu perilleuse car I'image gameover se situe dans le scenario principal, en 
dehors du clipdujeu. Pour que le scenario principal sachememece que sontle score et le temps, ces 
donnees doivent etretransmises du niveau du jeu vers le niveau racine. 

Juste avant d'appeler la commande gotoAndstop, qui doit faire avancer I'animation jusqu'a I'image 
gameover, nous passons ces deux valeurs a la racine : 

MovieClip( root) .gameScore = gameScore; 
MovieClip( root) .gameTime = clockTime(gameTime) ; 

Vous remarquerez que nous passons I e score sous forme de val eur brute, al ors que nous f ai sons passer 
le temps par la fonction ciockTime afin qu'il s'agisse d'une chaine avec un signe deux-points et des 
secondes a deux chiffres. 

Au niveau racine, nous devons definir ces nouvelles variables, qui utilisent les memes noms que les 
variables de jeu : gameTime et gameScore. J 'ai ajoute ce code a la premiere image : 

var gameScore :int; 
var gameTime:String; 

Ensuite, dans I 'image gameover, nous utilisons ces variables pour placer des valeurs dans de nouveaux 
champs texte : 

showScore.text = "Score: "+String(gameScore) ; 
showTime.text = "Time: "+gameTime; 
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II n'est pas necessaire d'utiliser du code pour creer les champs texte dynamiques showscore et 
showTime ; cela peut se faire sur la scene avec les outils d'edition de Flash. La Figure 3.15 montre a 
quoi ressemble maintenant l'ecran gameover lorsqu'une partie est terminee. 

Figure 3.15 

L'ecran de fin de partie avec 
le score etle temps ecoule. 

GAME OVER 
Score: 1600 
Time: 1:53 

PLAY AGAIN 



Pour simplifier les choses, nous avons ici inclus les chalnes "Score: • et "Time: • avec les 
champs score et Time. 1 1 a u ra i t cependant ete plus rigoureux d'inclure les mots score et Time 
sous forme de texte stati que ou d'image a l'ecran etde n'inclure que le score et le temps eux- 
memes a I'interieur des champs. Dans le cas present, il est indispensable de faire passer la 
variable gamescore dans la fonction string (car la propriete .text d'un champ texte doit etre 
unechame). En conservantsimplementgamescore, vous tenteriez dedefinir unechalne par un 
entier et provoqueriez un message d'erreur. 



Voila tout pour Matc.hingGame9.fla et MatchingGameObject9.fla. Nous dlsposons maintenant 
d'unjeu avec un ecran d'introduction etun ecran defin de partie. II tientleregistredu score, enregistre 
le temps ecoule et affiche ces indications en fin de partie. II permet egalement au joueur de lancer une 
nouvelle partie. 

Nousallons maintenant finaliser lejeu en ajoutant une vari ete d'effets sped aux, comme une animation 
pour le retournement des cartes, une limite de temps pour la visualisation des cartes et des effets 
sonores. 



fl| MatchingGam»9.swf I ° I B I a I 



Fichier Affichage Controle Deboguer 
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Ajouter des effets 

Qu'ils semblent loin, les premiers temps des jeux sur leWeb ou la simple idee depouvoir s'amuser a 
un jeu dans une page semblait deja un exploit ! II faut aujourd'hui s' employer a creer des jeux de 
qualite pour esperer attirer des visiteurs, et ce souci de perfection peut tenir a de simples touches 
definition comme des animations et des sons. 

Essayonsdesoignernotrejeu deM emory a I'aide de quelques effets speciaux. S'ilsnechangerontpas 
lejeu lui-meme, ils contribueront a le rendre plus interessant pour lesjoueurs. 

Retournements de cartes animes 

Puisque nous retournons sans cesse des cartes virtuel les, il est assez coherent devouloir representor 
ce mouvement de retournement par une animation. Vous pourriez lefaire avec une seried' images 
a I'interieur d'un clip mais, puisqu'il s'agit ici d'apprendre a programmer, faisons-le en Action- 
Script. 



II est assez difficile ici d'utiliser une animation dans le scenario au lieu d'une animation 
ActionScript, par la nature meme des cartes. Le but estd'animer non pas dix-huit cartes mais 
une seule. II sera it done plus judicieux de placer les faces des cartes dans un autre clip et de 
changer I' i mage de ce clip imbriqueau lieu du clip card principal. Lesimages2 etsuivantes 
du clip card peuvent alors etre utilisees pour une sequence animee presentant un retourne- 
ment de carte. Tout cela n'est pas simple a visualiser a moins d'etre habitue a creer des ani- 
mations F lash. 



Puisque cette animation affecteles cartes et el I es seul es, il est judicieux dela placer a I'interieur de la 
classe card. Nous ne possedons cependant pas de classe card. A u debut de ce chapitre, nous avons 
choisi de ne pas utiliser declasse card et de permettresimplement a Flash de lui attribuer une classe 
par defaut. 

II est cette fois temps de creer une classe card. Si nous creons un fichier Card.as, il sera cependant 
utilise par tous les objets card qui se trouvent dans le dossier. Nous avons deja les animations 
MatchingGamel.fla a MatchingGame9.fla qui contiennent des objets Card. Afin de signifier 
clairement que nous souhaitons que seule I 'animation M atchingG amelO.fla utilise cette classe Card, 
nous changerons done lenomdu symboleetdelaclassequ'il reference en choisissantcardio. Ensuite, 
nous creerons le fichier declasse ActionScript CardlO.as 

C ette classe permettra de creer un retournement ani me de la carte au I ieu de I a changer i nstantanement. 
Elle remplacera toutes lesfonctions gotoAndstop dans la classe principal e. E lie demandera aux cartes 
d'operer le retournement avec startFiip. Elle passera egalement I'image que la carte doit afficher 
une fois le retournement effectue. 
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La classe cardio definira ensuite certaines variables, configurera un ecouteur evenementiel et 
enclenchera ranimation de la carte dans les dix images suivantes : 

package { 

import flash. display.*; 
import flash. events.*; 



public dynamic class Card10 extends MovieClip { 
private var flipStep:uint; 
private var isFlipping: Boolean = false; 
private var flipToFrane:uint; 

// Comnencer le retournement, memoriser 1' image a atteindre 
public function startFlip(flipToWhichFrame:uint) { 

isFlipping = true; 

flipStep = 10; 

flipToFrame = flipToWhichFrane; 

this . addEventListener (Event . ENTER_FRAME, flip) ; 



// 10 etapes pour le retournement 
public function flip(event:Event) { 
flipStep--; // Etape suivante 

if (flipStep > 5) { // Premiere partie du retournement 

this.scaleX = . 2* (flipStep -6) ; 
} else { // Deuxieme partie du retournement 

this.scaleX = . 2* (5-flipStep) ; 

} 

// Au milieu du retournement, passer a nouvelle image 
if (flipStep == 5) { 

gotoAndStop(flipToFrame) ; 



} 



} 



// 



A la fin du retournement, arreter l'anination 



if 



(flipStep == 0) { 

this. removeEvent Listener ( Event .ENTER_FRAME, flip) ; 



} 



} 



} 



} 
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La variable fiipstep commence done a 10 lorsque lafonction startFiip estappelee. Elle est ensuite 
reduite d'une unite a chaque image subsequent^. 



La propri ete scaiex reduit ou etend la largeur d'un clip. La valeur par defaut est 1,0. La 
valeur 2,0 double sa largeur et la valeur 0,5 la reduit de moitie. 



Si fiipstep est comprise entre 6 et 10, la propriete scaiex de la carte se voit attribuer la valeur 
.2*(fiipstep-6), qui doit etre 0,8, 0,6, 0,4, 0,2 etO. Leclip se retrecit done a chaque etape. 

Ensuite, lorsque fiipstep est comprise entre 5 etO, on utilise la nouvelleformule .2* (5 -fiipstep). Le 
resultat devient done 0, 0,2, 0,4, 0,6, 0,8, puis 1. Leclip retrouve ainsi sa taille normal e. 

Lors de la cinquieme etape, la carte passe a la nouvelle image. Elle se retrecit, jusqu'a se reduire a 
rien, passe a la nouvelle image puis s'agrandit de nouveau. 

Pour realiser cet effet, j'ai du apporter une modification concernant la disposition des images dans le 
clip card. Dans toutes les precedentes versions du jeu, nous avions place le coin superieur gauche des 
cartes au centre du clip. Pour que la modification de scaiex donne I'impression que la carte pivote 
autour de son centre, j'ai cependant du centrer les images de carte dans chaque image sur I e centre du 
clip. Pour observer cette difference, comparez les clips Card dans MachingGame9.fla et 
MatchingGamelO.fla. La Figure 3.16 montre le resultat lors de I ' editi on des clips. 

Lors de la derniere etape, I'ecouteur evenementiel est completement supprime. 

L' i nteressant avec cette cl asse ti ent a ce q u' el I e f oncti 0 nne to ut aussi bien lorsque la carte est recouverte 
(retourneeface en bas) en al I ant a I'image 1. 



Figure 3.16 

Le cote gauche fait apparaitre le 
point d'alignement du clip en haut 
a gauche, comme dans les neuf 
premieres animations d'exemple 
du chapitre. A doite, le clip est 
centre, comme dans I'exemple final. 




Examinez MatchingGameObjectlO.aset remarquez comme tous les appels gotoAndStop ont ete 
remplaces par startFiip. Grace a cette modification, nous creons non seulement une animation de 
retournement, maisdonnonsegalementa la classecard un meilleurcontrolesurelle-meme. Ideale- 
ment, vous pourriez meme donner aux cartes un controle complet sur elles-memes en attribuant 
plus defonctions a la classe CardlO.as, comme celles qui definissent I 'emplacement des cartes au 
debut du jeu. 
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Temps d'affichage limite des cartes 

L'un des ajouts interessants a ce jeu consiste a retourner automatiquement les paires de cartes non 
correspondantes une fois que le joueur les a regardees suffisamment longtemps. Par exemple, 
supposons que le joueur choisisse deux cartes. Elles neforment pas une paire et restent done affichees 
pour que le joueur les observe. A pres deux secondes, les cartes se retournent, meme si le joueur n'a 
pas commence a selectionner une autre paire. 

Pour realiser cela, nous utiliserons un Timer. Cet objet est tres utile pour ajouter cetypedefonction. 
Pour commencer, nous devons importer la classe Timer dans notre classe principale : 

import flash. utils. Timer; 

Ensuite, nous devons creer une variable de minuteur au debut de la classe : 

private var flipBackTimer:Timer; 

Plus loin dans la fonction ciickcard, nous devons ajouter du code juste apres que le joueur a choisi 
la seconde carte, qu'il n'a pas obtenu de correspondance et que son score a ete diminue. Le code de 
Timer suivant configure un nouveau minuteur qui appelle simplement une fonction au bout de 
2 secondes : 

flipBackTimer = new Timer (2000, 1 ) ; 

flipBackTimer . addEvent Listener (TimerEvent ,TIMER_COMPLETE , returnCards) ; 
flipBackTimer. start ( ) ; 

L'evenement TimerEvent .timer_complete se declenche lorsqu'un minuteur a fini. Le plus souvent, 
le Timer boucleun certain nombredefois, en deel enchant un evenement TimerEvent. timer a chaque 
fois. Lorsdu dernier evenement, il declenche egalement l'evenement TimerEvent. timer_complete. 
Comme nous ne souhaitons delencher qu'un seul evenement a un moment ulterieur donne, nous 
fixons le nombred'evenements Timer a un, puis recherchons TimerEvent .timer_complete. 

A pres 2 secondes, lafonction returnCards estappelee. II s'agit d'une nouvellefonction qui procede 
comme la derniere partie de I'ancienne fonction ciickcard. Elle retourne la premiere et la seconde 
selection face vers le bas (masque les cartes) puis positionne les valeurs firstcard et secondcard a 
null. Elle supprime egalement I'ecouteur : 

public function returnCards(event:TimerEvent) { 
firstCard.startFlip(1 ) ; 
secondCard.startFlip(1 ) ; 
firstCard = null; 
secondCard = null; 

flipBackTimer. removeEvent Listener ( TimerEvent ,TIMER_COMPLETE, returnCards) ; 

} 



1 28 ActionScript 3.0 pour les jeux 



La fonction retumcards duplique le code qui se trouvait auparavant dans ciickcard. Dans 
MatchingGameObjectlO.as, j'ai done remplace ce code duplique dans ciickcard par un simple 
appel a retumcards. C'est ainsi un seul et meme emplacement dans notre code qui se charge de 
retourner les paires de cartes pour les masquer. 

Comme retumcards requiert un parametre d'evenement, nous devons lui passer ce parametre dans 
retumcards que nous ayons quelque chose a passer ou non. L'appel a I'interieur de ciickcard passe 
done simplement la valeur null : 

returnCards(null) ; 

A present, si vous executez I'animation et retournez deux cartes, elles se retournent automatiquement 
au bout de 2 secondes. 

Comme nous avons une commande removeEventListener dans la fonction retumcards, I'ecouteur 
est supprime meme si la fonction retumcards est declenchee par le joueur qui retourne une autre 
carte. Sans cela, le joueur retournerait une nouvelle carte, les deux premieres seraient masquees et 
I'evenement serait declenche apres 2 secondes alors meme que les deux cartes sont deja cachees. 

Effets sonores 

Un jeu ne saurait etre considere comme complet s'il n'emet pas de son. ActionScript 3.0 permet 
aisement d'ajouter des effets sonores, bien que cette operation requiere quelques etapes. 

La premiere consiste a importer vos sons. Pour ma part, j'ai cree trois sons et souhaite les importer 
chacun dans la bibliotheque : 

FirstCardSound . aif f 

MissSound.aiff 

MatchSound.aiff 

U nefois les sons importes, il convient de modifier leurs proprietes. Nommez-les tous en utilisant leur 
nom defichier sans I' extension .aiff. Cochez en outre I 'option Exporter pour ActionScript et donnez- 
leur le meme nom de classe que le nom de symbole. La Figure 3.17 presente la boTte de dialogue 
Proprietes de I 'un des sons. 

Ensuite, configurons la classe principale du jeu de maniere a lire les sons au bon moment. Pour 
commencer, nous devons importer deux nouvel les classes afin de pouvoir uti I iser du son : 

import flash. media. Sound; 
import flash .media. SoundChannel; 

Ensuite, nous creons des variables de classe pour contenir des references a ces sons : 

var theFirstCardSound: FirstCardSound = new FirstCardSound) ) ; 
var theMissSound:MissSound = new MissSoundO; 
var theMatchSound:MatchSound = new MatchSoundO ; 
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Figure 3.17 

Chaqueson estuneclasse 
et devient accessible dans le 
code ActionScript par le nom 
de sa classe. 



Proprietes audio 



Fir stCard Sound 



/Users/rosenz/Documents/Books/Flash Games 
3/Chapter 3/F irstCardSound.aiff 



mercredi 21 mars 2007 17:27:51 
22 kHz Mono 16 Bit 1.0 s *A, 1 kB 



Parametres d' exportation 
Son du peripherique : 



Compression : Par defaut 



Les parametres par defaut seront utilises a I'exportarjon 



Mettre a jour 
Importer.. 



0 



Liaison 

Identifiant 










Classe 
Classe de base 






FirstCardSound 


|*# 


flash, media. Sound 


✓ <? 


Liaison 


[7j Exporter pour ActionScript 






□ Exporter pour le partage a I'execufjon 






\j\ Exporter dans la premiere image 






Cj Importer pour le partage a rexecubon 




URL 


1 


1 







Pour ma part, je prefere charger une seule et meme fonction de proceder a la lecture de tous mes sons. 
Appelonscettefonction piaysound et ajoutons-la a la fin de la classe : 

public function playSound(soundObject: Object) { 
var channel:SoundChannel = soundObject .play( ) ; 

} 

A present, lorsque nous souhaitons lire un son, il nous suffit d'appeler piaysound avec la variable du 
son a utiliser, commececi : 

playSound(theFirstCardSound) ; 

Dans MatchingGameObjectlO.as, j'ai ajoute piaySound(theFir-stcardSound) lorsque lejoueur 
clique sur la premiere carte et lorsqu'il clique sur une carte alors que deux cartes non correspondantes 
sontdeja retournees. J'ai ajoute piaySound(theMissSound) lorsque la seconde carte est retourneeet 
qu'il n'y a pas de correspondance. J'ai ajoute piaysound(thewiatchsound) lorsque la seconde carte 
est retournee et qu' une correspondance est trouvee. 
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Voila tout ce qu'il faut pour aj outer des effets sonores a notre jeu. 



cJL=> 



A ce stade, il peut etre i nteressa nt de passer en revue vos parametres de publication afin de 
choi si r les reglages pour la compression des sons. Vous pouvez sinon definir la compression 
des sons i ndi vi duel I ement pour chaque son dans les proprietes du symbole. Dans un cas 
comme dans I'autre, il est sans doute preferable d'utiliser un reglage a forte compression, 
comme M P 3 16M bps, car il ne s'agit que de simples effets sonores. 



Modifier le jeu 

II nous reste quelques autres petites modifications avant de terminer ce jeu. 

Tout d'abord, lorsque nous avons recentre toutes les cartes, nous avons provoque un decalage 
horizontal et vertical pour le placement des cartes. II fautajuster cela : 

private static const boardOf f setX:Number = 145; 
private static const boardOf f setY:Number = 70; 

Comment ai-je calculeces valeurs ? Voici le raisonnement : 

o La scene fait 550 pixels de largeur. II y a six cartes en largeur espacees de 52 pixels. Cela fait 
550 - 6 x 52 pour I'espace total restant a gauche et a droite. J e di vise I e tout par deux pour obtenir 
I'espace a droite. Les cartes sont cependant centrees sur 0,0. Je dois done soustraire la moitie de 
la largeur d'une carte, soit 26. A insi, (550 - 6 x 52)/ 2 - 26 = 145. 

• Idem pour le decalage vertical : (400 - 6 x 52) / 2 - 26 = 70. 

Reste encore a considerer le curseur. L orsque lejoueur se positionne pour cliquer sur une carte, aucun 
curseur special ne lui signale qu'il peut cliquer a cet endroit. On peut aisement remedier a cela en 
positionnant la propriete buttonMode de chaque carte au moment de la creer. 

c.buttonMode = true; 

U n curseur en forme de main apparait maintenant lorsque I'uti I isateur survole les cartes. C'est deja le 
cas pourles boutonsPlay et Play Again caril s'agit desymbolesdebouton. 

J 'ai enfin opere une derniere modification en augmentant la cadence d'images de I'animation afin de 
passer de 12 i ps a 60 i ps. Vous pouvez le faire en choisissant M odification > Document et en 
parametral les proprietes du document de I'animation. 

A 60 i ps, les animations de retournement des cartes sont bien plus fl ui des. Et, grace au moteur 
ActionScript 3.0 ultrarapide, lesordinateurslentspeuventexecutercejeu avec cette cadence d'images 
elevee. 
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Voila tout pour notrejeu de M emory, dont la version finale utilise les fichiers suivants : 

M atchingG amelO.fla 

M atchingG ameObjectlO.as 

CardlO.as 



Jeux cerebraux : 
Simon et deduction 



Au sommaire de ce chapitre 

• Tableaux et objets de donnees 

• JeudeSimon 

• J eu de deduction 
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Au chapitre precedent, nous avons examine un jeu qui integraitune unique configuration de grille de 
jeu et dont la partie se terminait une fois la grille entierement effacee. Bien des jeux proposent 
cependantplusieurs configurations possibles. I Is creent une situation pour lejoueur, celui-ci agit, puis 
la situation suivanteest mise en place. Cesjeux peuvent etre consideres comme des jeux a tours. 

Dans ce chapitre, nous al Ions examiner deux jeux decetype : lejeu de Simon et lejeu de deduction. 
Le premier demande au joueur d'observer et de repeter une sequence. A chaque tour, la sequence 
s' allonge, jusqu'a ce que le joueur ne suive plus. Le second demande au joueur de deviner une 
sequence, en enchainant des tours et en se servant des indications fournies a chaque etape pour tenter 
de se rapprocher de la solution au tour suivant. 

La configuration simple utilisee au precedent chapitre nefonctionne pas pour cesjeux. Nousdevons 
utiliser des tableaux et des objets de donnees pour stacker des informations concernant le jeu et 
utiliser ces objets de donnees pour determiner I e resultat de chaque tour du joueur. 



Tableaux et objets de donnees 

Les jeux que nous allons creer dans ce chapitre requierentquel'on stocke des informations concernant 
la partie et les deplacements du joueur. Pour cela, nous allons utiliser ce que les informaticiens 
appellent des structures de donnees. 

Les structures de donnees designent tout simplement des methodes pour le stockage de groupes 
d' informations. L a structurededonnees la plussimpleestletableau, qui stocke une listed' informations. 
ActionScript propose egalement des objets de donnees qui permettent de stacker des informations 
etiquetees. Vous pouvez imbriquer cette structure dans la premiere et creer ainsi un tableau d'objets 
de donnees. 



Tableaux 

U n tableau est une liste de valeurs. Par exemple, si nous souhaitons qu'un joueur puisse choisir parmi 
une liste de personnages au debut d'une partie, nous pouvons stacker cette liste de la maniere 
suivante : 

var characterTypes: Array = new ArrayO; 

characterTypes = ["Warrior", "Rogue", "Wizard", "Cleric"]; 

Nous pourrions egalement utiliser la commande push pour ajouter des elements au tableau. Le code 
suivant produit ainsi le meme resultat que les lignes precedentes : 

var characterTypes: Array = new ArrayO; 
characterTypes. push ( "Warrior" ) ; 
characterTypes. push( "Rogue" ) ; 
characterTypes . push ( "Wizard " ) ; 
characterTypes. push( "Cleric" ) ; 
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Cet exemple creeun tableau dechames. Les tableaux peuventcependantcontenir n'importequel type 
de valeur, commedes nombresou memedes objets d'affichage tels que des sprites ou des clips. 



Les tableaux peuvent non seulement contenir des valeurs de n'importe quel type, mals eg a I e- 
ment combiner ces differents types. II est ainsi possible de creer un tableau comme le sui- 
vant : [7, -weiio" 



L'un des usages courants des tableaux dans les jeux consiste a stacker les clips et les sprites au fur eta 
mesurequ'ilssontcrees. Parexemple, au Chapitre 3, nous avonscreeunegri I ledepai res de cartes. Pour 
pouvoiry accederfacilement, nous aurions pu stacker une reference a chaque card dans un tableau. 

Ce tableau auraitpu etrecreedela manieresuivantesi nous avionsvoulu creer dix cartes : 

var cards: Array = new Array(); 
for(var i:uint=0;i<10;i++) { 

var thisCard:Card = new Card(); 

cards. push(thisCard) ; 

} 

II y a plusieurs avantagesa ceque les pieces de votrejeu setrouvent dans un tableau. Parexemple, il 
est aise de les parcourir en boucle puis de verifier chaque piece afin de retrouver des correspondances 
ou de detecter des col I i si ons. 



Vous pouvez egalement imbriquer des tableaux afin de creer des tableaux de tableaux. Cela 
se revel e parti cull erement utile pour les grilles de pieces de jeu comme pour le Chapitre 3. 
Par exemple, une grille de morpion pourralt etre representee comme cecl : irx°, "o°, "cry, 
( "0°, "x M , "0"i, ["x" , "0", "x 11 ;;. 



Vous pouvez ajouter de nouveaux elements aux tableaux, leur retirer des elements, les trier et faire 
porter une recherche sur I eurcontenu. LeTableau 4.1 liste certaines des fonctionsde tableau les plus 
courantes. 



Tableau 4.1 : Fonctions de tableau courantes 



Fonction 


Exemple 




Description 


push 


myArray . 


push ( "Wizard" ) 


Ajoute une valeur a la fin d'un tableau 


pop 


myArray . 


pop() 


Supprime la derniere valeur d'un tableau 
et la retourne 


unshif t 


myArray . 


unshift ( "Wizard" ) 


Ajoute une valeur au debut d'un tableau 
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Tableau 4.1 : Fonctions de tableau courantes (Suite) 



Fonction 


Exemple 






Description 


shift 


myArray . 


shift ("Wizard") 


Supprime la premiere valeur d'un tableau 
et la retourne 


splice 


myArray . 


splice(7 


,2, "Wizard" , "Bard" ; 


| Supprime les elements d'un emplacement 
du tableau et y insere de nouveaux elements 


indexOf 


myArray. 


indexOf ( ' 


'Rogue" ) 


Retourne I'emplacement d'un element 
ou -1 si I'element n'est pas trouve 


sort 


myArray. 


sort() 




Trie un tableau 



Les tableaux sont des structures de donnees courantes et indispensables dans les jeux. En fait, 
r ensemble des structures de donnees dont il sera question dans cette section utilise des tableaux pour 
convertir un unique element de donnees en une liste d' elements de donnees. 



Objets de donnees 

Les tableaux font merveille lorsqu'il s'agit de stacker des listes de valeurs uniques, mais que faire 
lorsque I'on souhaite regrouper des valeurs les unes avec les autres? Supposons que, dans un jeu 
d'aventure, vous souhaitiez memoriser des types de personnages, des niveaux et des points de sante 
dansun groupe. Supposons ainsi qu'un personnagea I'ecran soit un "Guerrier", au niveau 15, avec un 
niveau de sante compris entre 0,0 et 1,0. Vous pourriez utiliser un objet de donnees pour stacker 
ensemble ces trois elements d'information. 




Dans certains autres langages de programmation, I' equivalent des objets de donnees corres- 
pond en fait aux tableaux associatifs. Comme les objets de donnees, les tableaux associatifs 
sont des listes d'elements qui incluent une etiquette (une cle) et une valeur. Vous pouvez en 
realite utiliser les tableaux standard de cette maniere dans ActionScript, mais i Is ne sont pas 
aussi flexibles que les objets de donnees. 



Pour creer un objet de donnees, vous pouvez le definir comme etant de type object, puis lui ajouter 
des proprietes avec la syntaxe a points : 

var theCharacter:Object = new 0bject(); 
theCharacter.charType = "Warrior"; 
theCharacter.charLevel = 15; 
theCharacter.charHealth = 0.8; 
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Si vous le souhaitez, vous pouvez creer cette meme variable de la maniere suivante : 

var theCharacter: Object = {charType: "Warrior", charLevel: 15, charHealth: 0.8}; 

Les ob j ect sont dynamiques, ce qui signifie que vous pouvez leur ajouter de nouvelles proprietes des 
que vous le souhaitez et que ces proprietes peuvent etre de n'i mporte quel type. 1 1 n'est pas necessaire 
de declarer les variables a I'interieur d'un object ; vous n'avez qu'a leur attribuer une valeur comme 
dans I'exemple precedent. 

Les objets de donnees et les tableaux interagissent tres bien ensemble. Parexemple, vous pouvez creer 
un tableau de personnages comme le precedent. 



Les objets de donnees en ActionScript ne different pas vraiment des objets normaux. Vous 
pouvez meme attribuer unefonction a un objetde donnees. Par exemple, si vous avez un objet 
avec les proprietes prenom et nam, vous pouvez creer une fonction nomcompieto qui retourne 

prenom+" "+nom. 




Tableaux d'objets de donnees 

A partir de maintenant, nous utiliserons dans presque chaque jeu des tableaux d'objets de donnees 
pour tenir le registre des elements du jeu. Nous pourrons ainsi stacker les sprites ou les clips eux- 
memes en plus des donnees les concernant. 

Par exemple, un objet de donnees pourrait ressembler a ceci : 

var thisCard:0bject = new Object(); 
thisCard.cardobject = new Card(); 
thisCard.cardface = 7; 
thisCard.cardrow = 4; 
thisCard.cardcolumn = 2; 

A present, imaginons un tableau entier rempli de ces objets. Dans lejeu de M emory du C hapitre 3, 
nous aurions pu placer toutes les cartes dans des objets de cette sorte. 

Sinon imaginons un ensemble completd' elements a I'ecran, comme dans un jeu d'arcade. U n tableau 
d'objets stockerait des informations les concernant, comme la vitesse, le comportement, I'emplace- 
ment, etc. 



II existeun autre type d'objet, appele Dictionary. Lesdictionnaires peuvent etre utilises comme 
les object, a ceci pres qu'll est possible d'utiliser n'importe quelle valeur comme cle, comme 
des sprites, des clips, d'autres objets, enfin, en somme, pratiquement n'importe quoi. 
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Les structures de donnees comme les tableaux et les objets de donnees sont essenti elles dans tous les 
jeux a I'exception des plus simples. Utilisons-les dans deux exemples dejeu complets. 



Jeu de Simon 



Codes sources 

^it^f http://flashgameu.com 

A3G PL) 04 MemoryGame.zip 



Lejeu de Simon est un autrejeu simple pour lesadulteset lesenfants. C'est un jeu plus recent que le 
Memory, lequel peutetrejouesansequipementtechnologique. 

Lejeu de Simon consiste a presenter une sequence d'images ou de sons que le joueur doit tenter de 
reproduire. En general, la sequence commence par un element puis en ajoute un nouveau a chaque 
tour. L e joueur doit ai nsi repeter une sequence a un element, puisdeux, puistrois, etc., commeA, puis 
AD, puisADC, puisADCB, puisADCBD, etc. En fin de compte, la sequence devient si longue que 
le joueur finit par faire une erreur et que la partie se termine. 




La version la plus connue du jeu de Simon a ete popularisee par le jouet du meme nom com- 
mercialise dans le courant de I'annee 1978. II a ete cree par Ralph Baer, consldere comme 
I'un des peres des jeux sur ordinateur. Ralph Baer a cree lejeu original M agnavox Odyssey, 
premier jeu de console familial. En 2005, II s'est vu attribuer la M edaille nationale de la 
technologie pour son role de creation dans I'industrie du jeu video. 



Preparer I'animation 

Conformement au style ActionScript 3.0, nous allons creer tous les elements du jeu dans notre code. 
Cela implique de commencer par un scenario principal vide mais pas une bibliotheque vide. La 
bibliotheque doit contenir au moins le clip pour les pieces du jeu, qui seront des projecteurs dans cet 
ex em pie. 

Nous aurons cinq projecteurs, mais tous seront contenus dans un meme clip. En outre, il doit exister 
deux versions de chaque projecteur : allume et eteint. 

Le clip Lights lui-meme (voir Figure 4.1) inclut deux images qui contiennent un autre clip, 
Lightcoiors. Dans la premiere image de Lights, un cache masque le clip Lightcoiors et estompe 
sa couleur dans le caique shade. II s'agit d'un cache noir dont la propriete alpha est fixee a 75 %, 
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cequi signifie que seul ement 25 % delacouleursous-jacentetransparait. La premiere image correspond 
done a une couleur attenuee qui represente I'etat eteint des projecteurs. L a seconde image ne contient 
plus ce cache et correspond done a I'etat allume. 



Figure 4.1 

Le scenario du clip Lights contient 
deux images : eteint et allume. Le clip 
est ici presente avec le mode Apercu, 
auquel vous pouvez acceder depuis le 
menu deroulant situe en haut a droite 
du scenario. 



I Uemorybame.fla [ 




) t [■: i 12.0m o.m « u 



. Scene 1 S Lioht 



Bpace de travai' ™' A 





II n'existe ni bon ni mauvais moyen de creer des elements de jeu comme les projecteurs de ce 
jeu de Simon. Vous pouvez avoir un clip pour chaque projecteur ou pour chaque etat de pro- 
jecteur. Vous pourriez aussi placer les dix variantes (cinq projecteurs et deux etats possibles) 
dans un scenario a dix images. Parfois, ces choix ne sont qu'affaire de gout. Si vous etes 
programmeur et que vous travailliez avec un artiste sur un jeu, I'approche peut etre adaptee 
pour faciliter la creation des images par I'artiste. 



Leclip Lightcoiors (voir Figure 4.2) contient cinq imagesqui affichent toutes une couleur differente. 

Le clip Lightcoiors est nomme lightcoiors avec un I minuscule. Pour modifier la couleur d'un 
projecteur, il suffit done d'utiliser lightcoiors. gotoAndstop avec lenumero d'image. 

Nous nommerons I'animation M emoryG ame.fla et le fichier A ctionScript M emoryG ame.as. Cela 
signifie que la classe du document doit etre M emoryGame dans I'inspecteur des proprietes, comme 
nous I'avons fait pour le jeu de M emory au Chapitre 3. 
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Figure 4.2 

Le scenario du clip Lightcoiors 
contient une couleur par image. 
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Strategie de programmation 

L'animation commence avec ri en, puis A ctionScript cree tousles elementsa I'ecran. Nous devonsdonc 
creer les cinq projecteursetleurattribuerchacun une couleur. Ensuite, nous devons creer deux champs 
texte : I'un pour indiquer aux joueurs s'ils doivent observer la sequence ou tenter de la reproduire et 
I' autre pour leur faire savoir le nombre de projecteurs actuellement impliques dans la sequence. 



II existe de nombreuses autres solutions qu'utiliser deux champs texte pour afficher des 
Informations. Par exemple, le nombre d'elements dans la sequence pourrait apparaftre 
dans un cercleou un rectangle sur un cote. Le texte "Watch and listen" (observez etecoutez) 
et le texte "Repeat" (reproduisez) pourraient au lieu de cela etre des symboles qui s'allu- 
ment comme des feux vert et rouge de circulation. Les champs texte sont simplement un 
moyen pratique pour ne pas se soucier de ces elements et pour seconcentrer ici sur le code 
de la logique du jeu. 
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Les clips Light seront stockes dans un tableau. II y a cinq projecteurs, soit cinq elements dans le 
tableau. Ce tableau nous permettra plus facilement de nous referer aux clips lorsque nous aurons 
besoin delesallumerou de les eteindre. 

N ous stockerons egalement la sequence dans un tableau. E I le commencera sous la forme d'un tableau 
vide et nous y ajouterons un projecteur aleatoire a chaque tour. 

Unefois la lecture d'une sequence term i nee, nous dupliquerons le tableau de la sequence. A mesure 
que lejoueur cliquera sur les projecteurs pour reproduirela sequence, noussupprimerons un element 
du devantdu tableau achaqueclic. Si cetelementdelasequencecorrespond au clic, nous en deduirons 
que lejoueur a fait le bon choix. 

Nous utiliserons egalement des objets Timer dans cejeu. Pour lire la sequence, un minuteur appellera 
unefonction a chaque secondeafin d'allumer un projecteur. Ensuite, un second minuteur declenchera 
une fonction pour eteindre le projecteur au bout d'une autre demi-seconde. 

Definition de classe 

LefichierMemoryGamaascontiendralecodedecejeu. N'oubliezpasdel'associeraMemoryGama 
fla en definissant la Classe du document dans I'inspecteur des proprietes. 

Pour commencer le code, nous declarerons le paquetage et la classe. II faut importer quelques classes 
Flash. En plus de la classe flash. display.* pour afficher les clips, nous avons besoin de la classe 
flash. events.* pour les dies de souris, de la classe flash. text.* pour I'affichage du texte et de 

flash, utils. Timer pour les minuteurs. Les classes flash, media. Sound et flash, media. SoundChannel 

sont requises pour lire les sons qui accompagnent les projecteurs. L a classe flash . net . URLRequest est 
requise pour charger les sons depuis des fichiers externes : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. text.*; 
import flash. utils. Timer; 
import flash. media. Sound; 
import flash. media. SoundChannel; 
import flash. net. URLRequest; 

Comment connaissais-je les noms des classes a Importer au debut de ce code ? Simple : je les 
ai recherches dans les pages de I'aide Flash. Par exemple, pour trouver ce dont j'avais 
besoin pour un champ texte, j'ai consulte TextFieid et la definition m'a indique qu'il fallait 
flash, text. *. E n fait, au I ieu d'exami ner la page de documentation, je saute en general direc- 
tement a la fin de la page pour examiner le code d'exemple. La commande import est tres 
facile a retrouver de cette maniere. 
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La definition de classe inclut plusieurs declarations de variables. La seule constante que nous 
utiliserons est lenombredeprojecteurs dans lejeu (ici, cinq) : 

public class MemoryGame extends Sprite { 
static const numLights:uint = 5; 

Nous auronstrois tableaux principaux : I'un pourcontenirdes references aux cinq clips deprojecteur, 
puis deux pour contenir la sequence de projecteurs. Le tableau piayorder s'etendra a chaque tour. Le 
tableau repeatorder contiendra un duplicata du tableau piayorder lorsque lejoueur reproduit la 
sequence. II se reduira a mesure que lejoueur cliquera sur les projecteurs et que les comparaisons 
seront effectuees avec chacun des projecteurs dans la sequence : 

private var lights :Array; // Liste des objets projecteur 
private var playOrder: Array; // Sequence croissante 
private var repeatOrder:Array; 

II nous faut deux champs texte, I'un pour contenir un message a destination du joueur en haut de 
I'ecran et un autre pour contenir la longueur de la sequence actuel I e en bas de I'ecran : 

// Message texte 

private var textMessage:TextField; 
private var textScore:TextField; 

Nous utiliserons deux minuteurs dans lejeu. Le premier allumera chaque projecteur dans la sequence au 
coursdesa lecture. Le second sera utilise pour eteindre les projecteurs unedemi-secondeplustard : 

// Minuteurs 

private var lightTimer:Timer; 
private var of f Timer: Timer; 

Parmi les autres variables requises figure gameMode, qui stockera la valeur "play" ou la valeur 
"replay" selon que le joueur observe la sequence ou tente de la reproduire. La variable 
currentseiection stockera une reference aux clips Light. Le tableau soundList contiendra des 
references aux cinq sons qui seront joues avec les projecteurs : 

var gameMode: String; // Lecture (play) ou reproduction (replay) 

var currentSelection :MovieClip = null; 

var soundList: Array = new Arrayf); // Contient les sons 

Voila I' ensemble des variables que nous devons suivre. Nous aurions egalement pu inclure des 
constantes pour le positionnement du texte et des projecteurs, mais nous les coderons en dur afin de 
nous concentrer sur le fonctionnement du code. 

Configurer le texte, les projecteurs et les sons 

La fonction constructeur MemoryGame s' execute des que la classe est initialises. Nous I'utiliserons pour 
configurer I'ecran du jeu et charger les sons. La Figure 4.3 presente I'ecran au tout debut dujeu. 



Chapitre 4 



Jeux cerebraux : Simon et deduction 1 43 



Figure 4.3 

L'ecran du jeu de Simon 
presente deux champs texte 
et cinq projecteurs. 



Fichier Affichage Controle Deboguer 



^ 



Watch and Listen. 




Sequence Length: 1 



Ajouter le texte 

Avant de configurer I'un ou I'autre champ texte, nous al Ions creer un objet Text Format temporaire et 
defi nirl'apparence que nous souhaitonsdonner a notre texte. N ousuti I iseronscette variable temporaire 
lorsde la creation des deux champs texte etn'en auronsplusbesoinensuite. II n'estdonc pasnecessaire 
de defi ni r la variable textFormat (notez I * uti I i sation du t minuscule) dans la classe pri ncipale, mais 
uniquement dans cette fonction : 

public function MemoryGame() { 
// Mise en forme du texte 



Le champ texte du haut, qui doit etre nomme textMessage, contiendra un message a I'intention du 
joueur lui indiquants'il doit observer etecouter la sequence ou s'il doit cliquersurles projecteurs afin 
de la reproduire. 

Nous leplacerons vers le haut de l'ecran. II fera 550 pixels de large, soit la largeur complete de l'ecran. 
Comme textFormat. align vaut "center" et comme le champ texte couvre la largeur de l'ecran, le 
texte doit etre centre a l'ecran. 

Nous devons egalement positionner la propriete selectable du champ a false. Sans eel a, lecurseur 
sechangera en un curseur deselection de texte lorsque le joueur survolera le champ. 



var textFormat = new TextFormat () ; 
textFormat .font = "Arial"; 
textFormat. size = 24; 
textFormat. align = "center"; 
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L'oubli qui consiste a ne pas attribuer la valeur false a la propriete selectable d'un champ 
texte fait partie des erreurs courantes. Par defaut, la propriete selectable vaut true, ce qui 
signifie que le curseur se transforme en un curseur d'edition de texte lorsque le joueur sur- 
vole le champ. L'utilisateur peut alors selectionner le texte mais, plus important encore, ne 
peut aisement cliquer sur les objets qui figurent sous le texte. 



Pour finir, nous positionnons def auitTextFormat a notre objet textFormat afin de definir la police, 
la taille de police et I'alignement du texte pour le champ : 

// Creation du champ texte superieur 
textMessage = new TextFieldO; 
textMessage. width = 550; 
textMessage. y = 110; 
textMessage. selectable = false; 
textMessage. def auitTextFormat = textFormat; 
addChild(textMessage) ; 

Le second champ texte affiche la longueur de la sequence courante afin que le joueur puisse evaluer 
son avancement. II setrouvera vers le bas de I'ecran : 

// Creation du champ texte inferieur 
textScore = new TextFieldO; 
textScore. width = 550; 
textScore. y = 250; 
textMessage. selectable = false; 
textScore. def auitTextFormat = textFormat; 
addChild (textScore) ; 



Charger les sons 

E nsuite, nous allons charger les sons. A u C hapitre 3, nous avons util ise des sons qui se trouvaient dans 
la bibliothequede I'animation. ActionScript 3.0 ne rend pas cette methode flexible parcequechaque 
son dans la bibliotheque doit etre reference comme son propre objet. Pour utiliser cinq sons, "notel" 
a "note5", il faudrait alors cinq objets separes et des lignes de code distinctes pour chacun. 

ActionScript 3.0 propose en fait un jeu de commandes bien plus robuste pour la lecture des fichiers 
son externes. Nous les utiliserons pour cejeu. Pour cela, nous chargerons cinq fichiers son, "notel. 
mp3" a "note5.mp3", dans un tableau de sons. 



F lash insiste sur le fait que les sons externes soient au format M P3. Le grand interet du M P3 
tient a ce que vous pouvez veritablement controler la taille et la qualite d'un fichier avec 
votre logiciel d'edition audio. Vous pouvez done creer des sons de petite taille et de faible 
qualite lorsqu'il convient de reduire le temps de telechargement ou des sons volumineux de 
haute qualite lorsque cette fidelite est requise. 
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// Chargement des sons 
soundList = new Array) ); 
for(var i:uint=1 ;i<=5;i++) { 

var thisSound: Sound = new Sound(); 

var req:URLRequest = new URLRequest( "note"+i+" .mp3" ) ; 

thisSound. load(req) ; 

soundList. push(thisSound) ; 

} 

Le "note"+i+" ,mp3" a I'interieur de la fonction uRLRequest construit une chame du type 
"notei.mp3\ Le symbole + concatene les chames et les autres elements en une chame plus 
longue. Le resul tat cor respond done a la concatenation de "note" plus la va I eur del a variable 

i, plUS ".mp3". 




Ajouter les clips Light 

Maintenant que nous avons des champs texte et des sons, il ne nous reste plus qu'a ajouter les 
projecteurs. Nous creerons cinq clips Light et les espacerons de maniere a les centrer. Pour chaque 
objet Light, nousenverronsleclip lightcoiors interieura une image differente afin que chaque clip 
possede une couleur differente. 

En plus d'ajouter les clips a la scene avec addChiid, nous lesajouteronsau tableau lights pour nous 
y referer par la suite. addEventListener permetaux clips de reagiraux dies desouris en appelant la 
fonction ciickLight. Nous positionnerons egalement la propriete buttonwiode de maniere que le 
curseur setransforme en une main lorsque I'utilisateur survole le projecteur : 

// Creation des projecteurs 
lights = new Array ( ) ; 
for(i=0;i<numLights;i++) { 

var thisLight: Light = new Light(); 

thisLight .lightColors.gotoAndStop(i+1 ) ; // Afficher l'image appropriee 
thisLight. x = i*75+100; // Position 
thisLight. y =175; 

thisLight. lightNun = i; // Memoriser numero de projecteur 
lights. push(thisLight) ; // Ajouter au tableau des projecteurs 
addChild(thisLight) ; // Ajouter a l'ecran 
thisLight . addEventListener (MouseEvent .CLICK, ciickLight ) ; 
thisLight. buttonMode = true; 

} 



1 46 ActionScript 3.0 pour les jeux 



Tous les elements ecran ont ete crees. II est maintenant temps de commencer le jeu. Nous allons 
attribuer un nouveau tableau vide a piayOrder, gameMode, pour "jouer" puis appeler nextTurn pour 
demarrer le premier projecteur dans la sequence : 

// Reinitialisation de la sequence, premier tour 
piayOrder = new Array(); 
gameMode = "play" ; 
nextTurn ( ) ; 

} 

Lire la sequence 

La fonction nextTurn s'occupe de declencher chaque sequence de lecture. E I le ajoute un projecteur 
aleatoire a la sequence, positionne le message en haut de I' ecran en affichant "Watch and Listen" et 
declenche le lightTimer qui affiche la sequence : 

// Ajoute un a la sequence et demarre 
public function nextTurn() { 

// Ajoute un nouveau projecteur a la sequence 

var r:uint = Math.floor(Math.random()*numLights) ; 

piayOrder. push(r) ; 

// Affiche le texte 

textMessage.text = "Watch and Listen."; 
textScore.text = "Sequence Length: "+playOrder. length; 

// Configure les minuteurs pour afficher la sequence 

lightTimer = new Timer(1000, piayOrder. length+1 ) ; 

ligntTimer .addEventListener(TimerEvent .TIMER, lightSequence) ; 

// Lance le minuteur 
lightTimer. start () ; 

} 

Lorsqu'une sequence commence a jouer, la fonction lightSequence est appelee a chaque seconde. 
L'evenement est passe en parametre. Le currentTarget de cet event est I 'equivalent du Timer. 
L'objet Timer possede une propriete nommee currentcount qui retourne le nombre de fois ou le 
mi nuteurs' est arrete. Nous I'inserons dans piaystepetpouvonsl'utiliser pour determiner le projecteur 
dans la sequence a all umer. 
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Lafonction verifie la valeur de piaystep afin de determiner s'il va s'agir du dernier arret du minuteur. 
Si c'est lecas, au lieu d'afficher un projecteur, el I e commence la deuxieme moitied'un tour, lorsque 
lejoueur doit repeter la sequence : 

// Lire 1' element suivant de la sequence 
public function lightSequence(event :TimerEvent) { 
// Ou nous trouvons-nous dans la sequence ? 
var playStep: uint = event. currentTarget. currentCount -1 ; 
if (playStep < playOrder. length) { // Ce n'est pas la derniere etape 

lightOn(playOrder[playStep] ) ; 
} else { // La sequence est terminee 
startPlayerRepeat( ) ; 

} 

} 

Allumer et eteindre les projecteurs 

Lorsqu'il est temps pour lejoueur de commencer a repeter la sequence, nous rempl aeons le message 
texte par "Repeat" et attribuons a gameMode la valeur "replay". Ensuite, nous creons unecopie de la 
liste playOrder : 

// Debut de la repetition du joueur 
public function startPlayerRepeat( ) { 
currentSelection = null; 
textMessage.text = "Repeat."; 
gameMode = "replay"; 
repeatOrder = playOrder. concat() ; 



Pour creer une copie d'un tableau, nous uti I i sons la foncti on concat. Blen qu' el le soit destlnee a 
creer un nouveau tableau a partir de plusleurs tableaux, el I e fonctionne aussi blen pour creer un 
nouveau tableau a partir d'un seul autre tableau. Pourquol proceder de cette maniere au lieu de 
creer simplement un nouveau tableau et de le definir comme etant egal au premier ? Si nous 
posons une egalite entre les deux tableaux, ces tableaux seront litteralement identiques. E n modi- 
fiant I 'un, nous modifierons I'autre. Pour notre part, nous souhaltons creer un second tableau qui 
soit une copie du premier, de maniere que les modifications du second n'affectent pas le premier. 
Voila ce que nous permet de faire la fonctlon concat. 



Les deux foncti ons suivantesallument et eteignent un projecteur (Light). Nous passons le nombrede 
projecteursdanslafonction.L'allumaged'un projecteur requiert si mplementd'utilisergotoAndstop (2) 
pour envoyer le clip Light a la seconde image qui ne contient pas le cache recouvrant la couleur. 
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Au lieu d'utiliser les numeros d'image 1 et 2, nous aurlons egalement pu intituler les Images 
"on" et "off" et utiliser des noms d'etiquette d'image. Cette methode serait particulierement 
utile dans des jeux ou interviennent plus de deux modes par clip. 



Nous lirons egalement le son associe au projecteur, mais en utilisant une reference au son dans le 
tableau soundList que nous avons cree. 

lighton fait encore une derniere chose: creer et demarrer le minuteur offTimer. Celui-ci ne se 
declenchequ'uneseulefois, 500 millisecondes apres I'allumagedu projecteur : 

// Allumage du projecteur et configuration du minuteur pour l'eteindre 
public function lightOn(newLight) { 

soundList[newLight] .play() ; // Lecture du son 

currentSelection = lights[newLight] ; 

currentSelection.gotoAndStop(2) ; // Allumage du projecteur 
offTimer = new Timer(500, 1 ) ; // Rappel pour l'eteindre 
offTimer . addEvent Listener (Time rEvent .TIMER_COMPLETE , lightOf f ) ; 
offTimer. start ( ) ; 

} 

Lafonction lightoff renvoi eensuite leclip Light a la premiere image. C 'est la qu'il s'avere pratique 
de stacker une reference au clip Light dans currentSelection. 

Cette fonction demande egalement au minuteur offTimer de s'arreter. Pourtant, si offTimer ne se 
declenchequ'uneseulefois, a quoi cela sert-il ? En real ite, si offTimer nesedeclenchequ'uneseule 
fois, lightof f pourrait etre appelee deux fois. Cela se produit si lejoueur repete la sequence et clique 
suffisamment rapidement sur les projecteurs pour qu'ils s'eteignent avant que les 500 millisecondes 
expirent. Dans ce cas, lightoff est appelee une fois pour le die de souris, puis une nouvelle fois 
lorsque le mi nuteur lightof f s' arrete. E n emettant une commande offTimer . stop ( ) , nous parvenons 
ainsi a arreter ce second appel a lightoff : 

// Eteindre le projecteur si toujours allume 
public function lightoff (event:TimerEvent) { 
if (currentSelection != null) { 

currentSelection. gotoAndStop(1 ) ; 

currentSelection = null; 

off Timer. stop () ; 

} 

} 
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Accepter et verifier I'entree de I'utilisateur 

La derniere fonction requise pour lejeu est appelee lorsque le joueur clique sur un projecteur (Light) 
pendant la repetition de la sequence. 

E I le commence par une verification du mode dejeu (gameMode) afin de s' assurer que piayMode vaut 
"replay". Sinon lejoueur ne doit pas cliquer sur les projecteurs et la commande return est utilisee 
pour sortirde la fonction. 



Si return est generalement utilisee pour renvoyer une valeur a partir d'une fonction, el I e 
peut egalement etre utilisee pour terminer une fonction qui n'est pas censee retourner de 
valeur du tout. Dans un tel cas, il suffit d'une simple commande return seule. Si la fonc- 
tion est supposee retourner une valeur, return doit cependant etre suivie par la valeur. 



En supposant que eel a ne se produise pas, la fonction ugntof f est appelee pour eteindre I e projecteur 
precedent s'il ne I'est pas deja. 

Une comparaison est ensuite operee. Le tableau repeatorder contient un duplicata du tableau 
piayorder. Nous uti I i sons la commande shift pour retirer I e premier el ementdu tableau repeatorder 
et le comparer a la propriete lightNum du projecteur sur lequel lejoueur a clique. 



Rappelez-vous que shift retire un element du devant du tableau, alors que pop le retire 
a I'autre extremite. Si vous souhaitez simplement tester le premier element d'un tableau 
et non I'enlever, vous pouvez utiliser monrabieauioj. De la meme manlere, vous pouvez 
uti I i ser monrabieau [monTabieau . length - 1 ] pour tester le dernier element d'un tableau. 



En cas de correspondance, ce projecteur est allume. 

repeatorder se raccourcit a mesure que des elements sont supprimes du devant du tableau pour etre 
compares. L orsque repeatorder. length atteint zero, la fonction nextTurn est appelee et la sequence 
est ajoutee et rejouee une nouvelle fois. 

Si lejoueur a choisi le mauvais projecteur, le message texte est modifie afin d'indiquer que la partie 
esttermineeet gameMode est change de manierequ'aucun autre die desouris ne soit accepte : 

// Reception des clics de souris sur les projecteurs 
public function clickLight(event:MouseEvent) { 

// Empecher les clics pendant l'affichage de la sequence 

if (gameMode != "replay") return; 

// Eteindre projecteur s'il ne s'est pas eteint lui-meme 
lightOff (null); 
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// Reponse exacte 

if ( event. currentTarget.lightNum == repeatOrder. shift) ) ) { 
lightOn ( event . currentTarget . lightNum) ; 

// Verifier si la sequence est terminee 
if (repeatOrder. length == 0) { 
nextTurn( ) ; 

} 

// Mauvaise reponse 
} else { 

textMessage.text = "Game Over!"; 
gameMode = "gameover"; 

} 

} 

La valeur "gameover" de gameMode n'est en fait utilisee par aucun fragment de code. Puisqu'elle 
est differente de "repeat", les dies ne seront cependant pas acceptes par les projecteurs, ce qui est 
exactement I'effet recherche. 

II ne reste plus maintenant que les accolades de fermeture des structures de classe et de paquetage. 
Elles viennent a la fin dechaquefichierde paquetageAS. Lejeu ne peutse compiler en leur absence. 

Modifier le jeu 

Au Chapitre 3, nous avons commence par un jeu qui s'executait dans le scenario principal, un peu 
comme ici. A la fin du chapitre, nous avons cependant place lejeu a I ' interieur d'un clip attitre (en 
reservant I e scenario principal aux ecrans d' introduction et de fin departie). 

Vous pouvez proceder de la meme maniere ici. Sinon vous pouvez renommer la fonction MemoryGame 
en I 'appelant startGame. Elle ne sera ainsi plus declenchee des le depart de I'animation. 

Vous pourriez placer un ecran d'introduction dans la premiere image de I'animation, avec une 
commande stop dans I'image et un bouton pour emettre la commande play afin que I'animation se 
poursuiveetpassea I'imagesuivante. Danscette image, vous pourriez appeler la fonction startGame 
afin de lancer la partie. 



Si vous souhaitez etendre ce jeu au-dela d'une image, vous devez changer extends sprite au 
debut de la classe en le remplagant par extends Moviecup. U n sprite est un clip dote d'une 
seule image, tandis qu'un clip peut contenir plusieurs images. 
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Ensuite, au lieu d'afficher simplement le message "Game Over" lorsque lejoueur rate un coup, vous 
pourriez supprimer tous les projecteurs et I e message texte avec removechiid et passer directement a 
une nouvelle image. 

Ces deux methodes (encapsuler le jeu dans un clip ou attendre I' image 2 pour demarrer le jeu) 
permettent de creer une application plus complete. 

L'une des modifications qui pourraient etre apportees a ce jeu consisterait a commencer d'emblee 
avec une sequence de plusieurs etapes. Vous pourriez inclure au depart deux nombres aleatoires 
dans piayOrder ; lejeu commencerait alors avec un total detrois elements dans la sequence. 

U ne autre modification interessante pourraitconsi star a faci I iter lejeu en n'ajoutant dans la sequence 
que de nouveaux elements qui ne correspondent pas au dernier. Par exemple, si le premier element 
est 3, le suivant pourrait etre 1, 2, 4 ou 5. Lefait de ne pas repeter les elements reduit legerement la 
complexity du jeu. 

Vous pourriez pourcela utiliser une simple boucle while : 

do { 

var r:uint = Math.floor(Math.random()*numLights) ; 
} while (r == play0rder[play0rder.length-1 ] ) ; 

Vous pourriez egalement augmenter la vitesse a laquelle la sequence est rejouee. Pour I'instant, les 
projecteurs s'allumenttoutes les 1 000 millisecondes. lis s'eteignent apres 500 millisecondes. Vous 
pourriez ainsi stacker la valeur 1 000 dans une variable (comme lightDeiay) puis reduire cette 
valeur de20 millisecondes a chaquetour. U tilisez sa valeur entiere pour lightTimer et la moitie de 
sa valeur pour offTimer. 

Les variantes les plus interessantes de cejeu s'operent sans doute en apportant des modifications 
non pasau codemaisplutotaux graphismes. Pourquoi les projecteurs devraient-i Is necessairement 
etre alignes ? Pourquoi leur donner a tous la meme apparence ? Pourquoi d'ailleurs utiliser des 
projecteurs ? 

Imaginez un jeu ou les projecteurs seraient remplaces par des oiseaux chanteurs, tous differents 
et tous caches dans une scene sylvestre. A mesure qu'ils ouvriraient leurs bees et pepieraient, 
vous seriez invite a vous rappeler non seulement lesquels ont si f fie mais egalement I'endroit ou 
ils etaient situes. 



Jeu de deduction 

Voici un autre jeu classique. Comme lejeu de Memory, lejeu de deduction peut etre joue avec un 
simplejeu de pieces. II peut meme etre joue avec un crayon et du papier. Sans ordinateur, on ne peut 
cependant jouer qu'a deux joueurs. L'un doit produire une sequence en quelque maniere aleatoire de 
couleurs tandis que I'autre doit s'efforcer de la deviner. 
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Codes sources 
|t>c http://flashgameu.com 
A3GPU04 Deduction.zip 



Lejeu de deduction a ete popularise sous le nom de marque M astermind. II s'agit de I'un des 
jeux de decouverte de code les plus simples. 



Lejeu estgeneralementjoueavec une sequence aleatoirede cinq pions, chacun d'unecouleur parmi 
cinq possibles (par exemple rouge, vert, violet, jaune et bleu). Le joueur doit tenter une proposition 
pour chacun des cinq pions, meme s'il peut ne proposer aucun choix pour un ou plusieurs pions. Le 
joueur peut done par exemple proposer comme essai rouge, rouge, bleu, bleu, vide. 

Lorsque le joueur fournit sa proposition, I'ordinateur retourne le nombre de pions correctement places 
et le nombre de pions dont la couleur correspond a eel le d'un pion requis mais qui ne se trouve pas au 
bon endroit pour le moment. A insi, si la sequence est rouge, vert, bleu, jaune, bleu et que le joueur 
propose la sequence rouge, rouge, bleu, bleu, vide, le resultat correspond a une couleur au bon 
emplacement et a une couleur exacte. Lejoueur doit alors exploiter ces deux elements d'information 
pour elaborer sa proposition suivante. Un bon joueur parvient generalement a deviner la sequence 
complete en moins de dix tentatives. 



M athematiquement, il est possible de deviner n'importe quelle sequence aleatoire en cinq 
tentatives uniquement. II faut pour eel a des algorithmes plutot evolues. Pour plus d' informa- 
tions a cesujet, consultez I'article Wikipedia M astermind en version anglaise. 



Configurer I'animation 

Nous allons configurer cejeu de maniere un peu plus robuste que lejeu de Simon. II possedera trois 
images: une image d' introduction, une image de jeu et une image de fin de partie. Toutes les trois 
possederont une apparence minimaliste afin que nous puissions nous concentrer sur le code A ctionScript. 

U n arriere-plan et un titre seront inclus dans les trois images. Vous pouvez le voir a la Figure 4.4. 

L'image 1 contient un unique bouton. J 'ai cree un objet d'affichage de bouton BasicButton simple 
dans la bibliotheque. II ne contient en fait aucun texte : le texte qui apparait a la Figure 4.4 est en 
real ite place au-dessusdu bouton dans l'image. 
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Figure 4.4 

L'image 1 inclut un arriere-plan 
et un titre qui sont presents dans 
toutes les images, ainsi qu'un 
bouton Start qui ne figure que 
dans cette premiere image. 
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Le script de l'image 1 arrete I'animation a cette image et configure le bouton de maniere a accepter 
un clic desourispourdemarrerlejeu : 

stop(); 

st artButton .addEvent Listener (MouseEvent .CLICK, clickStart) ; 
function clickStart (event: MouseEvent) { 
gotoAndStop( "play" ) ; 

} 

La seconde image, intitulee "play" dans I e scenario, ne contiendra qu'uneseule commande. II s'agit 
d'un appel dans notre classed' animation a unefonction nommee startGame que nous allonscreer : 

startGane() ; 

La derniere image est intitulee "gameover" et possede sa propre copie du bouton de l'image 1. Le 
texte situe au-dessus est cette fois "Play Again". Lescriptdans l'image est tres si mi I aire : 

playAgainButton. addEvent Listener (MouseEvent .CLICK, clickPlayAgain) ; 
function clickPlayAgain(event:MouseEvent) { 
gotoAndStopf "play" ) ; 

} 

II nous faut deux symbolesen plusdu symbole de bibliotheque BasicButton. Le premier est un petit 
bouton nomme DoneButton. Comme le montre la Figure 4.5, il inclut cette fois I e texte qui I'illustre. 
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Figure 4.5 

Le bouton Done utilise dans lejeu 
fait la meme hauteur que les trous 
a pion utilises dans lejeu. 
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Le clip principal requis pour lejeu est le clip Peg. II s'agit de plus que d'un simple pion. C'est une 
serie de six images, la premiere presentant un trou vide et les cinq suivantes affichant cinq ampoules 
de couleur differente dans letrou. La Figure 4.6 presente ce clip. 



Figure 4.6 

Le clip Peg contient une prise 
d'ampoule vide et cinq images 
ou cette prise est remplie par une 
ampoule de couleur differente. 




Chapitre 4 



Jeux cerebraux : Simon et deduction 1 55 



A part I'arri ere-plan et le titre, le scenario principal ne contient rien. Nous allons utiliser le code 
ActionScript pour creer tous les elements du jeu. Et, cettefois, nous tiendrons le registre dechaque 
objet cree afin de pouvoir les supprimer en fin de partie. 

Definition de la classe 

L'animation de cet exemple est nominee Deduction.fla et le fichier ActionScript, Deduction.as. La 

classe du document dans I'inspecteur des proprietes doit done etre Deduction afin que l'animation 
utilise le fichier A S correspondant. 

La definition de classe de ce jeu est un peu plus simple que eel le du jeu de Simon. En effet, nous 
n'utiliserons cettefois ni minuteurni son. Seules les classes flash, display, flash, events et flash, 
text serontdonc importees: la premiere pour afficher et controler les clips, ladeuxieme pourreagir 
aux dies de souris et la troisieme pour creer des champs texte : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. text.*; 

Pour la declaration de classe, nous la ferons etendre Movieciip au lieu de sprite. En effet, le jeu 
s'etendra sur trois images et non une. Or un sprite n'utilisequ'une image : 

public class Deduction extends MovieClip { 

Pour cejeu, nous utiliserons une large gamme de constantes. D'abord, nous definirons les constantes 
numPegs et numCoiors. Nous pourrons ainsi aisement modifier le jeu afin d'inclure plus decinq pions 
dans la sequence ou plusou moinsd'optionsdecouleur. 

Nous incluerons egalement un ensemble de constantes afin de definir r emplacement ou seront 
dessinees les lignes de pions. Nous utiliserons un decalage horizontal et vertical pour toutes les 
lignes ainsi que I'espacement entre les lignes et I'espacement entre les pions. Nous facilitons ainsi 
I'ajustement de I' emplacement des pions en fonction de la taille des pions et des elements 
environnants du jeu : 

// Constantes 

static const numPegs:uint = 5; 

static const numColors:uint = 5; 

static const naxTries:uint = 10; 

static const horizOffset:Nunber = 30; 

static const vertOffset: Number = 60; 

static const pegSpacing: Number = 30; 

static const rowSpacing: Number = 30; 
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II nous faut deux variables principales pour tenir le registre de I'etat d'avancement dans le jeu. La 
premiere est un tableau contenant la solution. II s'agira d'un simple tableau de cinq nombres (par 
exemple 1, 4, 3, 1, 2). La seconde variable est turnNum, qui tient le registre du nombre de tentatives 
real i sees par lejoueur : 

// Variables de jeu 
private var solution: Array; 
private var turnNum:uint; 

Dans ce jeu, nous al Ions tenir un registre precis de tous les objets d'affichage que nous creons. II y 
aura une lignecourantedecinq pions stockeedans currentRow. Le texte a droite dechaque lignede 
pionssera currentText. Le bouton a droite des pions sera currentButton. En outre, nous utiliserons 
le tableau aiiDispiayObj ects pour tenir le registre de tout ce que nous creons : 

// References aux objets d'affichage 
private var currentRow:Array; 
private var currentText :TextField; 
private var currentButton:DoneButton; 
private var allDisplayObjects:Array; 

Chaque classe a sa fonction constructeur, qui possede le meme nom que la classe. Ici, nous ne 
I' utiliserons cependant pas, car lejeu ne commence pas dans la premiere image. Nous attendons que 
lejoueur clique d'abord sur le bouton Start. Nous incluerons done cette fonction, maissansy inserer 
decode : 

public function Deduction! ) { 
} 



Libre a vous de voir si vous souhaitez inclure une fonction constructeur vide. Pour ma part, 
il m'arrive tres souvent de realiser apres coup que je dois realiser quelque chose dans la 
fonction constructeur avant de finaliser mon jeu ; dans le doute, je I'ajoute done d'emblee 
lorsque je commence une classe. 



Demarrer une nouvelle partie 

Lorsqu'une nouvelle partie commence, le scenario principal appelle startGame afin de creer la 
sequence de cinq pions que recherche lejoueur. Cette fonction cree le tableau de solution ety insere 
cinq nombres aleatoi res comprisentre 1 et 5. 
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La variable turnNum est positionnee a 0. Ensuite, la fonction createPegRow est appelee pour faire le 
gros du travail : 

// Creer la solution et afficher la premiere ligne de pions 
public function startGame() { 

allDisplayObjects = new Array(); 

solution = new ArrayO; 

for(var i: uint=0; i<nunPegs; i++) { 

// Aleatoire, conpris entre 1 et 5 

var r:uint = uint (Math.floor(Math. random( )*nunColors)+1 ) ; 
solution. push(r) ; 

} 

turnNum = 0; 
createPegRow() ; 

} 

Creer une ligne de pions 

C 'est la fonction createPegRow qui realise tout I e travail qui consiste a creer les cinq pions ainsi que 
le bouton et le texte a cote. Nous I'appellerons a chaque fois qu'un tour commence. 

Elle cree d'abord cinq nouvelles copies de I'objet Peg de la bibliotheque. Chaque objet est place a 
I'ecran en fonction des valeursdesconstantes pegSpacing, rowspacing, horizoffset et vertoffset. 
Chaque objet est egalementpositionne a I'image 1, qui correspond au trou vide. 

La commande addEventListener fait reagir chaque pion a un die de souris. Nous activons aussi la 
propriete buttonMode des pions afin que lecurseur change quand I ' uti I i sateur les survole. 

La propriete pegNum est ajoutee a chaque pion lorsqu'il est cree, afin de pouvoir identifier le pion sur 
lequel lejoueur a clique. 

Une fois que le pion est ajoute a I'ecran avec addChiid, il est egalement ajoute a allDisplayObjects. 
Ensuite, il est ajoute a currentRow, mais pas lui-meme. Au lieu de cela, il est ajoute a currentRow 
sous la forme d'un petit objet avec les proprietes peg et color. La premiere est une reference au clip. 
La secondeest un nombredefinissant la couleur, ou I'absence, du pion dans letrou : 

// Creer une ligne de pions, plus le bouton DONE et le champ texte 
public function createPegRow( ) { 

// Creer des pions et en faire des boutons 
currentRow = new Array(); 
for(var i: uint=0; i<numPegs; i++) { 

var newPeg:Peg = new Peg(); 

newPeg.x = i*pegSpacing+horizOffset; 
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newPeg.y = turnl\lum*rowSpacing+vert0ff set; 
newPeg . gotoAndStop ( 1 ) ; 

newPeg.addEventListener(MouseEvent .CLICK, clickPeg) ; 
newPeg.buttonMode = true; 
newPeg.pegNum = i; 
addChild(newPeg) ; 
allDisplayObjects.push(newPeg) ; 

// Enregistrer les pions sous forme de tableau d'objets 
currentRow.push({peg: newPeg, color: 0}); 

} 

Unefois que les cinq pions ontetecrees, unecopiedu clip DoneButton est ajoutee a droite. M ais, tout 
d'abord, une verification est operee afin de voir si le currentButton existe deja. II n'existe pas la 
premiere fois qu'une lignede pions est creee, aussi, le bouton est cree et ajoute a la scene. II obtient 
aussi un ecouteur evenementiel et est ajoute a aiiDispiayObjects. 

L'emplacement horizontal du bouton est determine par des constantes. II doit se trouver a un 
pegSpacing de plus sur la droite du dernier pion dans la ligne. Nous n'avons besoin de definir que 
I'abscissex du bouton lorsqu'il est cree car nous ledeplaconssimplement vers le bas de I'ecran avec 
chaque nouvelle ligne de pions ajoutee. La position x n'est definie que cette fois, mais la position y 
I'est a chaque fois que la fonction createPegRow est appelee : 

// Ne creer le bouton DONE que si nous ne l'avons pas deja fait 
if (currentButton == null) { 

currentButton = new DoneButton( ) ; 

currentButton. x = nunPegs*pegSpacing+horizOff set+pegSpacing; 
cur rentButton.addEventListener(MouseEvent .CLICK, clickDone) ; 
addChild(currentButton) ; 
aiiDispiayObjects. push (currentButton) ; 

} 

// Positionner le bouton DONE avec la ligne 
currentButton. y = turnNun*rowSpacing+vertOffset; 

Ajouter le champ texte 

Apres le bouton vientle champ texte. Celui-ci est decale a droite d'un pegSpacing etdela largeur du 
currentButton. Nous ne real isons aucune mise en forme parti culiere, afin defai re simple. 

A la difference du bouton, un nouveau champ texte sera ajoute a chaque fois que nous creons une 
ligne de pions. Pour resoudre I e puzzle, les joueurs doivent pouvoir examiner toutes leurs precedentes 
tentatives et les resultats obtenus. 
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Le currentButton est defini en tant que DoneButton au debut de la classe. II ne se volt cepen- 
dant pas attribuer de valeur. Lorsque cette foncti on s'apprete la premiere fols a I'utiliser, sa 
valeur est done nun. La plupart des objets sont positionnes a nun au moment ou ils sont 
crees. Les nombres sont cependant positionnes a zero et ne peuvent jamais I'etre a nun. 



Le champ texte commence par les instructions "Click on the holes to place pegs and click DONE" 
(cliquez sur les trous pour placer les pions et cliquez sur DONE). II contiendra plus tard les resultats 
dechaque tentative a I a fin des tours : 

// Creer le message texte a cote des pions et du bouton 
currentText = new TextField(); 

currentText .x = numPegs*pegSpacing+horizOff set+pegSpacing*2+currentButton. width; 
currentText. y = turnNum*rowSpacing+vertOff set; 
currentText. width = 300; 

currentText. text = "Click on the holes to place pegs and click DONE."; 
addChild ( currentText ) ; 
allDisplayObjects. push (currentText) ; 

} 

Examinez la Figure 4.7 afin de voir a quoi ressemble I'ecran lorsque la premiere createPegRow est 
appelee. Vousverrez les cinq pions, suivis par le bouton, puis le champ texte. 



Figure 4.7 

Lorsque lejeu commence, la 
premiere ligne de trous de pion 
est creee et le joueur doit operer 
sa premiere conjecture. 
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Verification des propositions du joueur 

Lorsque le joueur clique sur un trou de pion, il fait defiler en boucle les pions colores et revient a un 
trou vides'il clique assez defois. 

Pour savoir sur quel pion (peg) le joueur a clique, nous examinerons event .currentTarget .pegNum. 
Nous auronsainsi un index a rechercher dans le tableau currentRow. De la, nous pourrons obtenir les 
proprietes color et Peg. 



Les couleurs sont numerotees de un a cinq, I e zero representant I' absence de pion. Les images 
dans les clips sontcependant numerotees en commengant a 1. L' image 1 est le trou vide et les 
images 2 a 6 correspondent aux couleurs. Gardez-le a I' esprit lorsque vous examinez I e code 
et I'ajout +? dans I'instruction gotoAndstop. 



La couleurdu Peg est stockee dans currentcoior, une variable temporai re qui n'est utilises que dans 
cette fonction. Si c'est inferieur au nombre de couleurs disponibles, le Peg affiche simplement la 
couleur suivante. Si la derniere couleur est deja affichee, le Peg boucle pour afficher le trou vide, qui 
est la premiere image de la page : 

// Le joueur clique sur un pion 

public function clickPeg(event:MouseEvent) { 

// Determiner le pion et recuperer la couleur 

var thisPeg:Object = currentRow[event . currentTarget. pegNum] ; 

var currentColor: uint = thisPeg. color; 

// Avancer couleur du pion d'une unite, boucler de 5 a 0 
if (currentColor < numColors) { 

thisPeg. color = currentColor+1 
} else { 

thisPeg. color = 0; 

} 

// Afficher le pion ou 1' absence de pion 
thisPeg. peg. gotoAndStop(thisPeg.color+1 ) ; 

} 

Pour jouer, I ' uti I i sateu r deplace vraisemblablement le curseur sur chacun des cinq trous dans la ligne 
courante et clique le nombre requis de fois pour afficher la couleur de pion souhait.ee. A pres avoir fait 
cela pour les cinq trous, lejoueur poursuit en cliquant sur le bouton Done. 
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Evaluer les emplacements du joueur 

Lorsque lejoueur clique surlebouton Done, lafonction ciickDone estappelee. Elle delegue ensuite 
I' execution a la fonction caicuiateProgress : 

// Le joueur clique sur le bouton DONE 
public function clickDone(event :MouseEvent) { 
calculateProgress( ) ; 

} 

La fonction caicuiateProgress s'occupe de calculer dans quelle mesure la proposition du joueur 
correspond a la solution. 

Les deux variables locales numcorrectspot et numcorrectcoior sont les principaux resultats que 
nous cherchons a calculer, II est en fait tres facile de determiner numcorrectspot : nous parcourons 
en boucle chacun des Peg et determinons si la couleur selectionnee par lejoueur correspond a la 
solution. Si e'est le cas, nous ajoutons 1 a numcorrectspot. 

Le calcul de numcorrectcoior est deja plus complexe. Pour commencer, il faut ignorer tous les pions 
que I'utilisateur a correctement places pour se concentrer sur les pions incorrects, puis examiner les 
couleurs que lejoueur a selectionnees et qui auraient pu aller autre part. 

Une solution astucieuse pour cela consiste a tenir le registre de chacune des couleurs uti Usees par le 
joueur dans ces pions incorrects. En outre, tenez le registre des couleurs requises pour les pions 
incorrects. Nousferons cela avec les tableaux soiutioncoionist et currentcoionist. 

Chacun des elements dans ces tableaux correspondra a une somme de chacune des couleurs trouvees. 
Par exemple, si deux rouges (couleur 0), un vert (couleur 1) et un bleu (couleur 2) sont trouves, le 
tableau resultant sera [2,1,1,0,0]. 2+1+1=4. Puisqu'il y acinq pions et que la somme fait quatre, 
nous devons avoir un pion correct et seuls quatre trous doivent etre resolus. 

Ainsi, si [2,1,1,0,0] representelescouleursutilisees par lejoueur dans les pions erroneset [1 ,0,1 ,2,0] 
represente les couleurs requises dans ces emplacements, nous pouvons determiner le nombre de 
couleurs correctes uti I i sees aux mauvais emplacements en recuperant simplement le nombre le plus 
petit des deux tableaux : [1,0,1,0,0]. 

Voyonscela couleur par couleur. D ans I e premier tableau ([2,1 ,1,0,0]), lejoueur place deux rouges. 
M aisle second tableau ([1,0,1,2,0]) montrequeseul un rouge est requis. Le nombre minimal entre 
deux et un est un. Seul un rouge est hors de place. Lejoueur a egalement place un vert. M ais le second 
tableau montrequ'aucun vertn'est requis. Leplus petit nombre est done zero. Lejoueur a selectionne 
un bleu et un bleu est requis. En voila un autre dans le tableau. Lejoueur a choisi zero jaune, mais 
deux sont requis. Lejoueur a choisi zero violet et zero est requis. Voila un autre zero dans le tableau. 
Le pi us petit est zero. Ainsi 1+0+1+0+0 = 2. Deux couleurs sont mal placees. LeTableau 4.2 presente 
un autre apercu de ce calcul. 
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Tableau 4.2 : Calcul des pions mal places 



Couleur 


Choisie par 
Vutilisateur 


Correcte 


Nombre de pions 
mal positionnes 


Rouge 


2 


1 


1 


Vert 


1 


0 


0 


Bleu 


1 


1 


1 


Jaune 


0 


2 


0 


Violet 


0 


0 


0 


Total mal positionnes 






2 



En pi us de cal cul er I e nombre total de pions corrects etdecouleurs mal placees, nousallonsen profiter 
pour desactiver le mode bouton des pions en utilisant removeEventListener et en positionnant 

buttonMode a false : 

// Calcul du resultat 

public function calculateProgress( ) { 

var nunCorrectSpot:uint = 0; 

var numCorrectColor:uint = 0; 

var solutionColorList : Array = new Array(0,0,0,0,0) ; 
var currentColorList: Array = new Array(0,0,0,0,0) ; 

// Parcours en boucle des pions 
for(var i:uint=0;i<numPegs;i++) { 

// Ce pion est-il correct ? 

if (currentRow[i] .color == solution[i] ) { 
nunCorrectSpot++; 

} else { 

// Pas de correspondance, mais enregistrer les couleurs pour le test suivant 
solutionColorList[solution[i] -1 ]++; 
currentColorList[currentRow[i] . color -1 ]++; 

} 

// Desactiver le mode bouton du pion 

currentRow[i] .peg. removeEventListener (MouseEvent .CLICK, clickPeg) ; 
currentRow[i] .peg. buttonMode = false; 

} 

// Obtenir le nombre correct de couleurs correctement positionnees 
for(i=0;i<numColors;i++) { 

numCorrectColor += Math.min(solutionColorList[i] ,currentColorList[i] ) ; 

} 
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M aintenant que nous connaissons le resultat des tests, nous pouvons les afficher dans le champ texte 
qui contenait precedemment les instructions : 

// Afficher le resultat 

currentText.text = "Correct Spot: "+numCorrectSpot+" , Correct Color: "+numCorrectColor; 

Ensuite, nous souhaitons passer au turnNum et verifier si lejoueur a trouve la solution. Si c'est le cas, 
nous repassons le controle a la fonction gameover. Par ailleurs, si le joueur a excede le nombre 
maximal de tentatives, nous passonsle controle a la fonction gameLost. 

Si la partie n'est pasterminee, nouspassons au tour suivant en appelant createPegRow : 

turnNum++; 

if (nunCorrectSpot == numPegs) { 

ganeOver( ) ; 
} else { 

if (turnNum == maxTries) { 

gameLost () ; 
} else { 

createPegRow( ) ; 

} 

} 



Fin de la partie 

Si le joueur a trouve la solution, nous souhaitons lui indiquer que la partie est termin.ee. Nous 
poursuivrons en creant une ligne de plus dans le jeu. Cettefois, il n'est pas necessaire d'afficher les 
pions car la I igneprecedente que lejoueur a completeecontientmaintenant la solution correspondante. 
La Figure 4.8 montre a quoi ressemble I'ecran. 

Indiquer que le joueur a gagne 

La nouvelle ligne n'a besoin de contenir que le bouton et un nouveau champ texte. Le bouton sera 
relie de maniere a declencher la fonction ciearGame. Le champ texte suivant affichera "You Got It!" 
(trouve). Nous devons I'ajouter a aiiDispiayObjects comme tout ce que nous creons dans le jeu : 

// Le joueur a trouve la solution 
public function gameOver() { 
// Changer le bouton 

currentButton.y = turnNum*rowSpacing+vertOff set; 
currentButton . removeEventListener (MouseEvent . CLICK, clickDone) ; 
cur rentButton.addEventListener(MouseEvent .CLICK, ciearGame) ; 
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// Creer le message texte a cote des pions et du bouton 
currentText = new TextField(); 

currentText .x = numPegs*pegSpacing+horiz0ffset+pegSpacing*2+currentButton. width; 

currentText .y = turnl\lum*rowSpacing+vertOff set; 

currentText .width = 300; 

currentText .text = "You got it!"; 

addChild(currentText) ; 

allDisplayObjects. push (currentText) ; 



Figure 4.8 

La partie se termine 
lorsque le joueur 
trouve la solution. 
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Deduction 
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Correct Spot: I, Correct Color 1 
Correct Spot: 2, Correct Color 0 
Correct Spot: 0. Correct Color 2 
Correct Spot: 0, Correct Color 1 
Correct Spot: 2, Correct Color 0 
Correct Spot: 3, Correct Color 0 
Correct Spot: I, Correct Color 1 
Correct Spot: 5, Correct Color 0 
You got it! 



Indiquer que le joueur a perdu 

La fonction gameLost est analogue a la fonction gameOver. Sa pri nci pale difference tient a ce qu' el le 
doit creer une derniere ligne de pions afin de reveler la solution aujoueurqui donnesa langueau chat. 
La Figure 4.9 montrea quoi pourrait ressembler I'ecran a ce point. 

Cesnouveaux pions n'ont pas besoin d'etre configures comme des boutons. I Is doivent cependant etre 
configures pour afficher la bonne couleur de pion. 
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Figure 4.9 

Le joueur a epuise 
tous ses essais. 
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Deduction 



Correct Spot: 0. Correct Color. 1 
Correct Spot: 0 : Correct Color 2 
Correct Spot: 0, Correct Color 1 
Correct Spot: 0. Correct Color 3 
Correct Spot: 1, Correct Color 1 
Correct Spot: 0, Correct Color 2 
Correct Spot: 1. Correct Color 1 
Correct Spot: 0 : Correct Color 2 
Correct Spot: 2. Correct Color 0 
Correct Spot: 3 : Correct Color 0 
You ran out of guesses! 



En outre, le bouton Done est modifie afin d'appeler la fonction ciearGame, comme dans gameOver. 
Un nouveau champ texte est cree, mais qui affiche cette fois "You ran out of guesses" : 

// Le joueur a atteint le nonbre maximal de tours 
public function ganeLost() { 
// Changer le bouton 

currentButton.y = turnNun*rowSpacing+vertOff set; 
currentButton . removeEventListener (MouseEvent . CLICK, clickDone) ; 
cur rentButton.addEventListener(MouseEvent .CLICK, ciearGame) ; 

// Creer le message texte a cote des pions et du bouton 
currentText = new TextField(); 

currentText .x = numPegs*pegSpacing+horizOff set+pegSpacing*2+currentButton. width; 

currentText. y = turnNum*rowSpacing+vertOff set; 

currentText. width = 300; 

currentText. text = "You ran out of guesses!"; 

addChild(currentText) ; 

allDisplayOb j ects . push ( currentText ) ; 

// Creer la ligne de pions finale pour afficher la reponse 
currentRow = new Array(); 
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for(var i:uint=0;i<numPegs;i++) { 
var newPeg:Peg = new Peg(); 
newPeg.x = i*pegSpacing+horizOffset; 
newPeg.y = turnNum*rowSpacing+vertOff set; 
newPeg.gotoAndStop(solution[i]+1 ) ; 
addChild(newPeg) ; 
allDisplayObjects.push(newPeg) ; 

} 

} 

Lorsquela partiesetermine, lebouton Done restea I'ecran dans la ligne finale. S'il clique dessus, le 
joueur est conduit a I'ecran defin departiedu scenario principal, ou il peut choisir de jouer a nouveau. 
Avant de faire eel a, nous devons cependant effacer tous les elements de jeu de la scene. 

Effacer les elements du jeu 

La suppression des objets d'affichage est un processus a plusieurs etapes que facilite grandement notre 
tableau aiiDispiayObjects. Chacun des objets d'affichage que nous avons crees, qu'il s'agisse d'un 
clip, d'un bouton ou d'un champ texte, a eteajoute ace tableau. Nous pouvonsmaintenantlessupprimer 
en parcourant le tableau en boucleet en utilisant removeChiid pour retirer I'objet de I'ecran : 

// Supprimer tout pour aller a I'ecran de fin de partie 
public function clearGame(event:MouseEvent) { 

// Supprimer tous les objets d'affichage 

for(var i in aiiDispiayObjects) { 

renoveChild(allDisplayObjects[i] ) ; 

} 

M erne a I'ecart de la scene, les objets existent toujours, en I'attente d'une commande addChiid qui 
les replacerait a I'ecran. Pour s'en debarrasser veritablement, nous devons supprimer toutes les 
references a ces objets. Nous faisons reference aux objets d'affichage a plusieurs endroits de notre 
code, dont le aiiDispiayObjects. Si nous le positionnons a nun, puis positionnons les variables 
currentText, currentButton et currentRow a null egalement, aucune des variables ne fait plus 
reference a aucun de nos objets d'affichage. Les objets sont ensuite supprimes. 



En realite, lorsque voussupprimez toutes les references a un objet d'affichage, vous le mettez a 
disposition du "ramasse-miettes". Cela si gnifie si mplement que F lash peut supprimer ces objets 
de la memoirea tout moment. Comme il n'y a plus de reference a ces objets et aucun moyen de 
faire reference a I'un d'entre eux si vous le souhaitez, vous pouvez pour votre part les consi- 
derer comme supprimes. F lash ne se compliquera toutefois pas la vie a les supprimer sur-le- 
champ ; il ne s'y attel I era que lorsqu'il aura quelques cycles processeur a gaspiller pour cela. 
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// Positionner toutes les references d'objets d'affichage a null 
allDisplayObjects = null; 
currentText = null; 
currentButton = null; 
currentRow = null; 

Pourfinir, lafonction ciearGame demandeau scenario principal deserendrea I'imagegameover. C'est 
a cet endroit que figure un bouton Play A gain sur lequel lejoueur peut cliquer. Tous les objets d'affichage 
etant supprimes, lejeu peutveritablement recommencer, avec denouveaux objets d'affichage : 

// Demander au scenario principal d'avancer 
MovieClip(root) .gotoAndStop( "ganeover" ) ; 

} 

La fonction ciearGame est la fonction critique utilisee pour creer un jeu dans le scenario principal qui 
peut etre efface et redemarre. Si on la compare au fonctionnement du jeu de M emory du Chapitre 3, 
le resultat semble identique. Vous avez la certitude que, la deuxieme fois que lejoueur commence le 
jeu, il entame une partie entierement nouvelle, comme la premiere fois. 

L'approche utilisee au Chapitre 3 est cependant un peu plus simple a mettre en place parceque tous 
les objets d'affichage sontinstantanementetaisement supprimes I orsque I eclipdisparait dans I' image 
de fin de partie. 

Modifier le jeu 

Comme pour lejeu de Simon, I'unedes meilleures vari antes du jeu de deduction consistea intervenir 
surlesgraphismesdu jeu. Vous pouvez uti I iser toutes sortes d'objets pour les pions etmeme creer une 
mise en scene pour les situer dans un contexte particulier. Par exemple, vous pouvez proposer au 
joueur de tenter d'ouvrir un coffre-fort ou dedeverrouiller une porte dans un jeu d'aventure. 

Notre utilisation des constantes permet aisement de proposer un nombre de tentatives plus el eve dans 
cejeu, de reduireou d'augmenter le nombre de pionsou decouleurs, etc. Si vous souhaitez proposer 
un plus grand nombre d'essai s, vous aurez sans doute besoin d'agrandir la scene ou de reduire 
I'espacementdeslignes. 

Pour finaliser cejeu, j'utiliserais d'abord un objet TextFormat afin de mettre en forme le message 
texte. Ensuite, j'ajouterais des instructions dans I 'ecran d' introduction. U n bouton Restart (redemarre) 
dans I ' i mage du jeu pourrait aussi permettre au j oueur de recommencer a tout moment. 1 1 pourrai t tout 
simplement appeler ciearGame afin desupprimer tous les elements ecran et conduirea I'image de fin 
de partie. 

Pour rendre ce jeu plus proche du jeu de societe M astermind, vous pourriez remplacer le message 
texte par des pions blancs et noirs. L'un designerait un pion correctement place, I'autre, une couleur 
correctesitueeau mauvais emplacement. Noir, noir, blanc signifierait ainsi deux pions corrects et une 
couleur correcte au mauvais emplacement. 



Animation de jeu : 
jeux de tir et de rebond 

Au sommaire de ce chapitre : 

• Animation de jeu 

• A ir Raid 

• Casse-brique 
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Jusqu'a present, nous n'avons cree que desjeux dont les elements restaient positionnes a un meme 
emplacement. Ces elements changaient et pouvaient etre modifies par les actions de I'util isateur, mais 
ilsnesedeplacaient pas. 

Danscechapitre, nous al Ions travail I eravec des elements dejeu animes. Certains seront control es par 
le joueur, d'autres se deplaceront de maniere autonome. 

Apres avoir examine certains exemples d'animation, nous creerons deux jeux. Le premier s'appelle 
Air Raid, un jeu simple dans lequel vous controlez un canon de DCA et tentez de toucher les avions 
qui traversent le ciel au-dessus de votre tete. Le second est un jeu de casse-brique ou vous controlez 
une raquette et renvoyez une balle en direction d'un mur de briques qui disparaissent quand la balle 
les touche. 



Animation de jeu 



Codes sources 

http://flashgameu.com 
A 3G PU 05 A nimation.zip 



Au Chapitre 2, nous avons examine deux types d'animations principaux : les animations a images et 
lesanimationstemporelles. Nousn'uti I iserons dans ce chapitre que des animations temporelles, parce 
qu'elles sont plus fiables et off rent des resultats de meilleure apparence. 

Animation temporelle 

L'idee de base de I'animation temporelle est de deplacer les objets a cadence homogene, quel les que 
soient les performances du lecteur Flash. 

Un unique mouvement, que nous appellerons une etape, se produit a chaque image. Une cadence 
d'i mages de 12 ipsimpliquedonc 12 etapes par seconde. Bien que les etapes d'animation seproduisent 
a chaque image, il ne s'agit pas d'une animation d'image car nous determinons la taille de chaque 
etape de maniere temporelle. 

A chaque etape, nous calculons le temps ecoule depuis I'etape precedente. Nous deplacons les 
elements du jeu en fonction decette difference temporelle. 

Si la premiere etape prend 84 millisecondes et la seconde, 90, nous deplacons les objets legerement 
plus loin a la seconde etape qu'a la premiere. 

La Figure 5.1 presente un diagramme de trois images du mouvement avec une animation temporelle. 
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Figure 5.1 

L'objet avance de 400 pixels par 
seconde quelle que soit la cadence 
d'images. 




Temps : 0 ms 



L'objet a la Figure 5.1 est suppose se deplacer de 400 pixels a chaque seconde. L'animation est 
configuree pour une cadence d' images tres fai ble de 4 i ps. Pour compliquer les choses, supposons que 
I'ordinateur manque totalement de reactivite, par exemple parce qu'il est occupe par d'autres 
applications ou une activite reseau. II n' est pas a memede proposer une cadence d'i mages constante 
ni meme de generer quatre i mages par seconde. 



Lors du developpementd' animations temporel les, il estjudicieuxde modifier frequemment la 
cadence d'images de votre animation pendant vos tests. En general, j'alterne entre 12 et 60 
images par seconde. M on but est d'obtenir un jeu qui possede une excellente apparence a 
60 ips mais reste tout aussi jouable a 12 ips. 

Si je relie accidentellement un element de jeu a la cadence d'images au lieu de la mesure 
temporelle, je remarque ainsi rapidement une considerable difference dans le jeu entre les 
deux cadences d'images. 




Lorsque I a premiere image passe etqu'un evenement enter_frame declenche la fonction d' animation 
dans notre code, 317 millisecondes sesontecoulees. A 4 images par seconde, seules250 millisecondes 
auraient du s'ecouler. J usque-la, la cadence d'images est deja a la traine. 

M ais, en util isant la mesuretemporellede317 millisecondes, nous pouvons calculer que l'objet aurait 
du se deplacer d'une distance de 127 pixels. Cela fait 400 pixels par seconde multiplies par 0,317 
seconde. A la cadence d'images, I'objetsetrouveainsi exactementou il doitetre. 

La seconde image prend plus de temps encore, pour un total de 423 millisecondes supplemental res. 
Voila en tout 740 millisecondes, cequi place l'objet a 297 pixels de distance. 
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Ensuite, dans la derniere image de I'exemple, 260 millisecondes supplemental res s'ecoulent. Cela 
nous porte a un total exact de 1 000 millisecondes. La distance est done de 400. Apres 1 seconde, 
I'objet s'est done deplace de 400 pixels, en depit du fait que I'animation a produit une cadence 
d'images irreguliere et n'est pas parvenue a generer 4 images par seconde. 

Si nous avions simplement fait avancer I'objet de 100 pixels par image, il se serai t maintenant deplace 
de 300 pixels, n'ayant eu que 3 images pour avancer. Ce resultat pourrait etre different sur un autre 
ordi nateur ou a un autre moment sur le meme ordi nateur, lorsque les performances serai ent suffisantes 
pour produire 4 images par seconde. 

Programmer des animations temporelles 

L'astuce pour programmer des animations temporelles consiste a surveiller precisement le temps 
ecoule. En examinant la fonction getTimer, vous pouvez obtenir le nombre de millisecondes depuis 
que I'animation a commence. La valeur brute de getTimer n'est pas interessante en elle-meme. Ce 
qui compte, e'est la difference temporel I e entre les images. 

Parexemple, il peutf al loir 567 millisecondes pour que votre animation s'initialiseetplaceles elements 
a I'ecran. Ainsi, la premiere image se produit a 567 et la seconde, a 629. La difference est de 
62 millisecondes : e'estcettemesurequi nous permetde determiner la distance qu'un objet doit avoir 
parcouru entre les images. 

L' animation A nimationTest.flacontientun clip decercle simple qui il lustre leprincipe del 'animation 
temporelle. L'animation utilise AnimationTest.as comme script principal et AnimatedObjectas 

commeclassedu clip. 

LaclasseAnimatedObject possede une fonction constructeurqui accepte des parametres. Cela signifie 
que, lorsque vous creez un nouveau AnimatedObject, vous devez passer des parametres, comme 
ceci : 

var myAnimatedObject:AnimatedObject = new AnimatedObject(100, 150,5, -8) ; 

Les quatre parametres represented I 'emplacement horizontal et vertical, puis la vitesse horizontal e et 
verticaledu clip. 

Voici la declaration de classe, les declarations de variable et la fonction AnimatedObject. Vous 
remarquerez les quatre parametres, definis simplement sous les noms x, y, dx, dy : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils. getTimer; 

public class AnimatedObject extends MovieClip { 

private var speedX, speedY:Number; // Vitesse actuelle en pixels par seconde 
private var lastTime:int; // Memoriser le temps de la derniere image 
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public function AnimatedObject(x,y,dx,dy) { 
// Definir emplacement et vitesse 
this.x = x; 
this.y = y; 
speedX = dx; 
speedY = dy; 
lastTime = getTiner(); 
// Deplacer chaque image 

addEventListener(Event.ENTER_FRAME, moveObject) ; 

} 



L'usage de dx et de dy pour le stockage de la "difference sur I'axe x" et de la "difference sur 
I'axe y" est une pratique assez courante. Dans ce chapitre et les suivants, nous utiliserons ces 
deux noms de variable assez souvent. 



La fonction prend quatre parametres et les applique. Les deux premiers sont utilises pour definir 
I 'emplacement du clip. Les deux autres sont stockes dans speedx et speedY. 

Ensuite, la variable lastTime est initialises avec la valeur courante de getTimer(). Pour finir, 
addEventListener permettra a la fonction moveObject de s'executer a chaque image. 

La fonction moveObject calcule d'abord le temps ecoule, puis I'ajoute a lastTime. La valeur de 
timePassed est ensuite utilisee pour calculer le deplacement. 



En ajoutant timePassed a lastTime, vous vous assurez qu'aucun temps n'est perdu dans 
I'animation. Si au lieu de cela vous positionnez lastTime a getumero a chaque etape de 
I'animation, vous risquez de perdre de petites tranches de temps entre le moment ou time- 
passed est calcule et celui ou lastTime se voit attribuer sa valeur. 



Comme timePassed s'exprime en milliemes de seconde (millisecondes), nous le divisons par 1 000 
pour obtenir la quantite a multiplier par speedx et speedY. Par exemple, si timePassed vaut 100, cela 
equivaut a 100/1000 ou a 0,1 seconde. Si speedx vaut23, 1 ' o bj et se depl ace de 23 x 0,1 ou de2,3 pixels 
vers la droite : 

// Deplacer en fonction de la vitesse 
public function moveObject(event:Event) { 

// Calcul du temps ecoule 

van timePassed :int = getTimer() - lastTime; 

lastTime += timePassed; 
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// Mettre a jour la position selon la vitesse et le temps 
this.x += speedX*timePassed/1000; 
this.y += speedY*timePassed/1000; 

} 

} 

} 

L'un des moyens simples de tester cette classe AnimatedObject consiste a utiliser une classe 
d'animation principale comme ceci : 

package { 

import flash. display.*; 

public class AnimationTest extends MovieClip { 

public function AnimationTest ( ) { 

var a:AnimatedObject = new AnimatedObject(100, 150,5, -8) ; 
addChild(a) ; 

} 

} 

} 

CecodecreeunclipalOO, 150 qui sedeplaceaunevitessede5 hori zontalementetde- 8 vertical ement. 
La classe AnimatedObject nous a done en fait permis d'ajouter un objet mouvant a la scene a I'aide 
dedeux simples lignes decode. 

Un meilleur test de la classe AnimatedObject consiste a aj outer plusieurs objets et a les faire bouger au 
hasard dans toutes les directions. Voici une version de la classe principale qui se charge de cette tache : 

package { 

import flash. display.*; 

public class AnimationTest extends MovieClip { 

public function AnimationTest)) { 

// Creer 50 objets positionnes au hasard avec des vitesses aleatoires 
for(var i:uint=0;i<50;i++) { 
var a:AnimatedObject = 

new AnimatedObject(Math.random()*550, Math. random ()*400, getRandomSpeed( ) , getRandomSpeed() ) ; 
addChild(a); 

} 

} 
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// Obtenir une vitesse comprise entre 70 et 100, positive ou negative 
public function getRandomSpeed() { 

var speed: Number = Math. random ()*70+30; 

if (Math.random() > .5) speed *= -1; 

return speed; 

} 



} 



Dans cette version de la classe, nous creons un nouvel AnimatedObject avec un emplacement et une 
vitesse aleatoi res. La position aleatoi re est creee en utilisant si mplement Math, random. Pour la vitesse 
aleatoi re, j'ai cependant utilise une fonction separee qui retourne une valeur positive ou negative 
comprise entre 70 et 100. Ce code sert a eviter que des objets se deplacent a une vitesse proche de 0. 

La Figure 5.2 presente cette animation I orsqu' el les' execute I a premiere fois. Les objets sonteparpilles 
a I'ecran. 



Figure 5.2 

L'animation AnimationTest 
place cinquante objets aleatoires 
sur la scene. 
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Vous pouvez vous amuser un peu avec cette classe afin de creer des effets interessants. Par exemple, 
si tous les objets commencent au meme emplacement, vous obtiendrez un effet d'explosion. 

Vous pouvez egalement ajuster le nombre d'objets cree et la cadence d'images de l'animation afin de 
voir comment votre ordinateur parvient a gerer une forte charge d'animation. 

A present, utilisons cette technique dans un jeu qui combine trois differents types d'objets animes. 
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Air Raid 



Codes sources 

(|j|)]X>c http://flashgameu.com 
A3GPU05_AirRaid.zip 



Air Raid est analogue a certains anciensjeux d'arcade. La plupartd'entre eux s'inspiraientde scenes 
navales ou le joueur commandait un sous-marin et tirait sur des bateaux qui striaient la surface de 
I'eau. Leplusancien a probablementete Sea Wolf. II proposait une vue subjective dans un periscope 
d'unesceneou vousdeviez tirersurdescibles. II s'agissaiten fait d'une version en jeu video desjeux 
electroniques Periscope, Sea Raider et Sea Devil. 



Ces jeux de tir navals etalent probablement les plus simples a realiser aux premieres heures 
■ de la programmation Informatlque, car les bateaux et les torpi lies ont I ' i nteret de se deplacer 
plus lentement que les avions et les canons anti-DCA. 



Dans notre jeu, le joueur deplace unetourelle anti-DCA en basdel'ecran a I'aide des touches flechees 
du clavier. II tire vers le haut en direction des avions qui defilent et tente d'en atteindre autant que 
possible avec un quantite de munitions I i mi tee. 

Configuration de I'animation et methode 

L' occasion est toute trouvee de creer maintenant un jeu qui utilise plusieurs classes. Nous avons pour 
I'essentiel trois differents types d'objets : des avions, une tourelle-canon et des balles. En creant une 
unique classe pour chacun deces objets, nous pouvons creer lejeu etape par etape puis special iser le 
code pour chacun. 

1 1 nous f aut troi s cl i ps pour accompagner les troi s classes. L es cl i ps MGun et Bullet f eront une i mage 
chacun. Le clip Airplane en contiendra plusieurs, avec un dessin d'avion different dans chacune. La 
Figure 5.3 presente ce clip. La sixieme image a la fin contient un graphisme d'explosion que nous 
utiliserons lorsqu'un avion esttouche. 

En plus des trois fichiers de classe AAGun.as, Airplanaas et Bullet.as, il nous faut un fichier de 
classe principale pour I'animation, AirRaid.as. 

Avions volants 

La classe ActionScript pour les avions nesera pas tres differente quant a sa structure de la classe 
AnimatedObject, vue precedemment dans ce chapitre. Elle acceptera des parametres dans la 
fonction constructeur pour determiner la position de depart et la vitesse de I'avion. Elle utilisera 
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la mesure temporelle pour determiner la difference entre les images. Elle utilisera un evenement 
enter_frame pour faire avancer I'animation. 



Figure 5.3 

Le clip Airplane contient cinq 
avions differents situes chacun 
dans une image. 
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Declaration de classe et de variables 

Le code qui suit correspond a la definition de la classe et des variables que la classe utilisera. Comme 
I'avion ne vol era qu'horizontalement, il n'aura besoin que de dx, la vitesse horizontale : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 

public class Airplane extends MovieClip { 

private var dx:Number; // Vitesse et direction 
private var lastTime:int; // Temps d'animation 



La fonction constructeur 

La fonction constructeur prendra trois parametres : side (cote), speed (vitesse) et altitude. Le 
parametre side sera soit "left" (gauche) soit "right" (droite) selon le cote del' ecran d'ou provient 
I'avion. 

Le parametre speed sera utilise pour definir la variable dx. Si I'avion vientde la droite del 'ecran, nous 
placerons automatiquement un signe moins devant la vitesse. U n avion progressant de gauche a droite 
a une vitesse de 80 aura done une vitesse dx de 80. A I ' i nverse, un avion progressant de droite a gauche 
avec une vitesse de 80 aura une vitesse dx de -80. 
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L'altitude n'est qu'un nom un peu pompeux pour designer la position verticale de I'avion. 0 
correspondra au haut de I'ecran, 50 a 50 plus bas, etc. 

En plus de definir r emplacement et dx, nous aurons egalement besoin de renverser I'avion afin qu'il 
s'orientedansla bonne direction. C 'est ce que nous fai sons en utilisantla proprietescaiexdu clip. La 
valeur -1 renverse I'image : 

public function Airplane(side:String, speed: Number, altitude: Number) { 
if (side == "left") { 

this.x = -50; // Demarrer a gauche 

dx = speed; // Voler de gauche a droite 

this.scaleX = -1; // Renverser 
} else if (side == "right") { 

this.x = 600; // Demarrer a droite 

dx = -speed; // Voler de droite a gauche 

this.scaleX =1; // Ne pas renverser 

} 

this.y = altitude; // Position verticale 
// Configurer 1' animation 

addEventListener ( Event .ENTER_FRAME,movePlane) ; 
lastTime = getTimer(); 

} 

L a fonction Airplane setermineen positionnantleminuteurevenementiel eten initialisantla propriete 
lastTime comme nous I'avons fait dans la classe AnimatedObject. 

Deplacer I'avion 

La fonction movePiane calcule d'abord le temps ecoule, puis deplace I'avion en fonction du temps 
ecouleetdesa vitesse. 

Ensuite, el le verifie si I'avion a termine son parcours de I'ecran. Si c'est le cas, nous appelons la 
fonction deletePlane : 

public function movePlane(event:Event) { 
// Calcul du temps ecoule 
var timePassed:int = getTimer( ) -lastTime; 
lastTime += timePassed; 

// Deplacer I'avion 

this.x += dx*timePassed/1000; 

// Verifier s'il est sorti de I'ecran 
if ((dx < 0) && (x < -50)) { 
deletePlanef ) ; 
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} else if ((dx > 0) && (x > 600)) { 
deletePlane() ; 

} 

} 



Supprimer les avions 

La fonction deietePiane est une sorte defonction autonettoyante, comme le montre le bloc de code 
suivant. Elle supprime I'avion de la scene avec une commande removeChiid. Elle supprime ensuite 
I'ecouteur de la fonction movePiane. 



II est toujours judicieux d'inclure une fonction avec une classe qui supprime I'objet. La classe 
peut ainsi gerer la suppression de ses propres ecouteurs et de toutes les commandes requises 
pour nettoyer les autres references a elle-meme. 



Pour que I'avion disparaissecompletement, nous devons indiquer a la classe principale qu'il atermine 
son parcours. Nous commengons done ici par appeler removePiane, une fonction de la classe du 
scenario principal. C'est le scenario principal qui a cree I'avion au depart et qui, se faisant, le stocke 
dansun tableau. La fonction removePiane, a laquel I e nous viendrons dans un instant, supprime I'avion 
du tableau : 

// Supprimer I'avion de la scene et de la liste des avions 
public function deletePlane() { 

MovieClip(parent) .renovePlane(this) ; 

parent . removeChiid (this) ; 

removeEventListener ( Event . ENTER_FRAME , movePiane ) ; 

} 



U ne fois que toutes les references a un objet ont ete reinitialises ou supprimees, le lecteur 
F lash reclamera la memoire uti I i see par I'objet. 





II y aura une seconde fonction pour supprimer I'avion. Celle-ci s'apparente a deietePiane, mais elle 
gerera lecas ou I'avion est touche par le tir du joueur. Elle interrompra aussi I'evenement d'image et 
indiquera a la classe principale de renvoyer I'avion du tableau. A u lieu de supprimer I'enfant de la 
scene, elle demandera cependant simplement au clip d'aller a I'image intitulee "explode" et de 
poursuivre la lecture a cet endroit. 
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Leclipcontientun graphismed'explosion qui demarrea I' image 6. II sepoursuitsurquelques images, 
puis atteint une image contenant une commande parent. removechiid(this) ; et une commande 
stop( ) ; . Ce code finalise la suppression de I'avion, apres un bref apergu de I 'explosion pour le plaisir 
desyeux du joueur : 

// Avion touche, afficher 1' explosion 
public function planeHit() { 

removeEvent Listener! Event .ENTER_FRAME,novePlane) ; 

MovieClip(parent) . removePlane(this) ; 

gotoAndPlay( "explode" ) ; 

} 



Vous pouvez faire durer I 'explosion plus longtemps en ral longeant le nombre d'images entre 
I'image "explosion" et la dernlere image contenant le script. De la meme maniere, vous 
pouvez placer une explosion animee dans ces images, sans qu'il soit necessaire d'ajouter 
d'autre code ActionScript. 



Tester la classe Airplane 

C'est le scenario principal qui se charge de creer les avions, mais egalement de les supprimer. Nous 
creerons cette classe par la suite. Si nous souhaitons tester la classe Airplane, nous pouvons le faire 
avec une classe principale simple comme la suivante : 

package { 

import flash. display.*; 

public class AirRaid extends MovieClip { 
public function AirRaid () { 

var a:Airplane = new Airplane( " right" , 170,30) ; 
addChild(a) ; 

} 

} 

} 

Si vous effectuez un test, il est judicieux d'essayer differentes valeurs pour les parametres. Par 
exemple, essayez "left" avec une vitesse de 30. Testez autant de valeurs qu'il le faut pour vous 
assurer que la classe Airplane fonctionne avant de passer a la classe suivante. 
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Tourelle mouvante 

La classe qui controle le canon anti-DCA (voir Figure 5.4) est un peu differente en ceci que le 
mouvement est controle par les actions de I'utilisateur. Nous pourrions utiliser la souris pour definir 
la position de la tourelle, maislejeu en deviendraitpresquetrop facile. II suffiraitd'un mouvement de 
poignet pour passer d'un cote a I'autrede I'ecran. 



Figure 5.4 

La tourelle anti-DCA est 
positionnee de maniere que son 
point d'alignement se trouve au 
boutdu canon. 
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Au lieu de cela, nous utiliserons done les touches flechees de gauche et de droite pour deplacer le 
canon. Comme les avions, nous ferons avancer la tourelle a une vitesse determi nee vers la gauche ou 
la droite en fonction de la touche enfoncee. 

Les touches flechees seront en fait gerees par la classe de I'animation principale et non par la classe 
AAGun. En effet, le clavier envoie par defaut des evenements a la scene et non a un clip particulier. 

La classe de I'animation principale aura deux variables, leftArrow et rightArrow, qui seront 
posi tionnees a true ou a false. La classe AAGun examine simplement ces variables pour voir dans 
quelle direction deplacer le canon si celui-ci doit bouger : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 

public class AAGun extends MovieClip { 
static const speed:Number = 150.0; 
private var lastTime:int; // Temps d'animation 
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public function AAGun() { 

// Emplacement initial du canon 
this.x = 275; 
this.y = 340; 

// Mouvement 

addEvent Listener (Event . ENTER_FRAME,moveGun) ; 

} 

M aintenant que Tempi acementdu canon aetedefini etquel'ecouteura eteajoute, lafonction moveGun 
s' execute a chaque image afin de gerer les eventuels mouvements : 

public function moveGun (event: Event) { 
// Calculer la difference temporelle 
var timePassed:int = getTimer() -lastTime; 
lastTime += timePassed; 

// Position actuelle 
var newx = this.x; 

// Deplacement vers la gauche 
if (MovieClip(parent) .leftArrow) { 
newx -= speed*timePassed/1000; 

} 

// Deplacement vers la droite 
if (MovieClip(parent) . rightArrow) { 
newx += speed*timePassed/1000; 

} 

// Verification des limites 
if (newx < 10) newx = 10; 
if (newx > 540) newx = 540; 

// Repositionnement 
this.x = newx; 

} 

} 

} 
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En plus de deplacer le canon, vous remarquerez sous le commentaire "Verification des I i mites" deux 
lignes qui s'occupent de verifier le nouvel emplacement du canon afin de s' assurer qu'il ne sort pas 
surles cotes. 

II vaut maintenant la peine de voir comment la classe principale gere les appuis sur les touches. Dans 
la fonction constructeur, deux appels a addEventListener configured ce dispositif : 

stage . addEventListener (KeyboardEvent . KEY_DOWN, keyDownFunction) ; 
st age. addEvent Listener (KeyboardEvent.KEY_UP,keyUpFunction) ; 

Les deux fonctions qui sont appelees definissent les valeurs booleennes de leftArrow et rightArrow 
comme il se doit : 

// Touche enfoncee 

public function keyDownFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if (event. keyCode == 39) { 

rightArrow = true; 

} 

} 



La valeur de event. keyCode est un nombre qui correspond a une touche du clavier. La touche 
37 est la touche flechee de gauche et la touche 39, eel I e de droite. Les touches 38 et 40 sont 
les touches flechees du haut et du bas, que nous utiliserons dans d'autres chapitres. 



// Touche relachee 

public function keyUpFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = false; 
} else if (event. keyCode == 39) { 

rightArrow = false; 

} 

} 

Le mouvement du canon est done produit par un effort conjoint de la classe principale et de la classe 
AAGun. La classe principale gere I ' entree clavier et la classe AAGun s'occupedu mouvement. 
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II reste une derniere partie dans la classe MGun qui correspond a la fonction deieteGun. Nous ne 
I'utiliserons que lorsqu'il sera temps desupprimer I e canon de la scene afin de passer a I' image de fin 

de partie (gameover) : 

// Supprimer de l'ecran et supprimer les evenements 
public function deleteGun() { 
parent . removeChild( this) ; 

removeEvent Listener ( Event .ENTER_FRAME,moveGun) ; 

} 



II est important de toujours penser a utiliser removeEventustener pour se debarrasser des 
evenements d'image et de minuteur. Sans cela, ces evenements continueront a se produire 
meme apres que vous aurez pense avoir suppri me I'objet parent. 



Les balles tirees en I'air 

Les balles sont probablement les plus simples des objets mouvants. Dans ce jeu, le graphisme qui les 
represente est en fait une grappe de balles (voir Figure 5.5). 



Figure 5.5 

Le point d'alignement du groupe 
de balles se trouve en bas, de 
sorte qu'en demarrant au niveau 
du canon el les se trouvent juste 
au-dessus des canons. 
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E I les commenceront a I' emplacement du canon etsedeplacerontversle hautjusqu'a atteindrela partie 
superieurede l'ecran. Nous avons deja vu dans les classes Airplane et MGun tout lecodede la classe 

Bullet. 
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La fonction constructeur accepte une valeur x et une valeur y de depart, ainsi qu'une vitesse. La 
vitesse sera appliquee verticalement et non horizontalement comme pour les avions : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 

public class Bullet extends MovieClip { 

private var dy:Number; // Vitesse verticale 
private var lastTime:int; 

public function Bullet(x,y:Number, speed: Number) { 
// Definition de la position de depart 
this.x = x; 
this.y = y; 

// Recuperer la vitesse 
dy = speed; 

// Configurer 1' animation 
lastTime = getTimer(); 

addEvent Listener ( Event . ENTER_FRAME,moveBullet) ; 

} 

public function moveBullet(event:Event) { 
// Calculer le temps ecoule 
var timePassed:int = getTimer( ) -lastTime; 
lastTime += timePassed; 

// Deplacer la balle 

this.y += dy*timePassed/1000; 

// La balle a passe le haut de l'ecran 
if (this.y < 0) { 
deleteBullet(); 

} 

} 
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La fonction removeBuiiet, comme la fonction removePiane, se trouvera dans la classe principale. 
Elle aura a charge de supprimer les balles lorsqu'elles atteignent le haut de I'ecran : 

// Supprimer la balle de la scene et de la liste des balles 
public function deleteBullet( ) { 

MovieClip(parent) .removeBuiiet (this) ; 

parent. removeChild (this) ; 

removeEventListener (Event . ENTER_FRAME , moveBullet ) ; 

} 

} 

} 

Pour lancer une balle, le joueur appuie sur la barre d'espace. N ous devons modifier keyDownFunction 
dans la classe AirRaid de maniere a accepter les espaces et a les passer a une fonction qui gere la 
creation d'une nouvelle balle (Bullet) : 

// Touche enfoncee 

public function keyDownFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if (event. keyCode == 39) { 

rightArrow = true; 
} else if (event. keyCode == 32) { 

fireBullet() ; 

} 

} 

Le code de touche 32 designe la barre d'espace. Pour retrouver lescorrespondances entre les 
codes et les touches, consultez I'aide de F lash en tapant "Touches du clavier et valeurs de 
code" dans le champ Rechercher. 

La fonction fireBuiiet passe I'emplacement du canon et une vitessea la nouvelle Bullet. Elle ajoute 
aussi la nouvelle Bullet au tableau bullets afin de pouvoir en tenir le registre pour la detection de 
collision ulterieure : 

public function fireBuiiet () { 

var b:Bullet = new Bullet(aagun.x,aagun.y, -300) ; 

addChild(b); 

bullets. push(b) ; 

} 
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Maintenant que nous avons des avions, un canon anti-DCA et des objets Bullet, il est temps de 
combiner tous ces elements avec la classe principale AirRaid. 



La classe du jeu 

La classe AirRaid contienttoutela logiquedu jeu. C'est a cet endroit que nous allonscreer les objets 
de jeu initiaux, verifier les collisions et gerer le score. Une fois que la partie sera lancee, le jeu 
ressemblera a I'ecran presentea la Figure 5.6. 




Declaration de classe 

La classe requiert les classes standard que nous avons uti Usees jusque-la, et notamment un acces a 
getTimer et aux champs texte : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils. Timer; 
import flash. text. TextField; 
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Parmi les variables dont nous avons besoin pour la classe figurent des references au canon et les 
tableaux qui referenced les avions et les balles que nous avons crees : 

public class AirRaid extends MovieClip { 
private var aagun:AAGun; 
private var airplanes : Array; 
private var bullets:Array; 

Les deux variables suivantes sont des valeurs true ou false qui permettentdesurveillerrusageque 
fait le joueur des touches flechees de gauche et de droite. E lies doivent etre rendues publiques parce 
que I' obj et aagu n y accedera afi n de determi ner s' i I f aut se depl acer : 

public var leftArrow, rightArrow: Boolean; 

Vous pouvez inclure plus d'une variable dans une I ignede definition de variable. C ette technique 
fonctionne bien lorsque vous avez de petits groupes de variables liees et du meme type. Les 
variables leftArrow et rightArrow sont ici un bon exemple de ce type d'application. 



La variable suivante, nextPiane, sera un Timer. Nous I ' uti I iserons pour determiner a quel moment 
I'avion suivant doit apparaitre : 

private var nextPlane:Timer; 

Pour finir, nous avons deux variables de memorisation du score. La premiere tient le registre du 
nombrede coups tires et la seconde, du nombred'avions touches par le joueur : 

private var shotsLeft:int; 
private var shotsHit:int; 

II n'existe pas defonctionconstructeur AirRaid pourcejeu carcelui-ci ne commence pas a la premiere 
image. A u lieu decela, nous en aurons uneappeleestartAirRaid qui sera appelee depuis le scenario 
principal dans I'image play. 

La fonction commence par definir le nombre de coups restants en lefixant a 20 et par mettre le score 
a zero : 

public function startAirRaid( ) { 
// Initialisation du score 
shotsLeft = 20; 
shotsHit = 0; 
showGameScore() ; 

Ensuite, le canon anti-DCA est cree et ajoute a la scene sous le nom d'occurrence aagun : 

// Creation du canon 
aagun = new AAGun( ) ; 
addChild(aagun) ; 
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N ous devons egalement creer les tableaux qui contiendront les balles et les avions : 

// Creation des tableaux d'objets 
airplanes = new Array) ); 
bullets = new Array(); 

Nous avons besoin dedeux ecouteurs pour savoir quelle touche flechee a eteenfoncee, I'un pour les 
evenements d'appui sur les touches et I' autre pour les evenements de relachement des touches : 

// Ecouter le clavier 

stage. addEventListener ( KeyboardEvent .KEY_D0WN, keyDownFunction) ; 
stage. addEventListener ( KeyboardEvent. KEYJJP, keyUpFunction ) ; 

Nousavonsbesoind'unecouteurevenementiel ENTER_FRAMEpourdeclencherlafonctioncheckForHits. 
II s'agira de la tres importante detection de collision entre les balles et les avions : 

// Rechercher les collisions 

addEventListener ( Event .ENTER_FRAME,checkForHits) ; 

Nous devons maintenant lancer le jeu en placant des avions en I'air. C'est le role de la fonction 
setNextPiane, que nous examinerons sous peu : 

// Faire voler des avions 
setNextPiane () ; 

} 

Creer un nouvel avion 

II faudra creer periodiquement de nouveaux avions, a des instants plus ou moins aleatoires. Pour cela, 
nous utiliserons un Timer et declencherons sous peu un appel a la fonction newPiane. La fonction 
setNextPiane creera le Timer avec un seul evenement et le configurera pour 1 a 2 secondes de del ai : 

public function setNextPlane( ) { 

nextPlane = new Timer(1000+Math.random()*1000,1 ) ; 

nextPlane. addEventListener (TimerEvent .TIMER_COMPLETE,newPlane) ; 

nextPlane. start ( ) ; 

} 

Lorsque I e Timer expire, il appellenewPianeafin de creer un nouvel avion etdelemettreen piste. Les trois 
parametres de I'objet Airplane sont calcules aleatoirement avec plusieurs resultats de fonction Math, 
randomo. Ensuite, I'avion est cree et ajoute a la scene. II est egalement ajouteau tableau airplanes. 

Pour finir, la fonction setNextPiane est appel ee de nouveau afin de pi anifier I'avion suivant : 

public function newPlane(event:TimerEvent) { 
// Cote, vitesse et altitude aleatoires 
if (Math.random() > .5) { 

var side: String = "left"; 
} else { 
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side = "right" ; 

} 

var altitude: Number = Math.random()*50+20; 
var speed:Number = Math. random 0*150+1 50; 

// Creer un avion 

var p:Airplane = new Airplane(side, speed, altitude) ; 

addChild(p); 

airplanes. push(p) ; 

// Definir le temps pour 1' avion suivant 
setNextPlane() ; 

} 

Detection de collision 

La fonction la plus interessante detout lejeu est la fonction checkForHits. E I le examine toutes les 
balles et tous les avions afin de determiner si I'un d'entreeux entreen collision. 

Vous remarquerez que nous parcourons les tableaux en boucle a reculons. Nous procedons 
ainsi pour ne pas nous emmeler les pinceaux lorsque nous supprimons un element d'un 
tableau. Si nous progressions vers I'avant, nous pourrions supprimer I' element 3 du tableau, 
cequi feraitdel'ancien element4 lenouvel element3. Deslors, en avangantpour rechercher 
I'element 4, nous sauterions un element. 



Nous utiliserons nitTestobject pour voir si les rectangles d'encadrement des deux clips se chevauchent. 
Si c'est le cas, nous realiserons plusieurs choses. Tout d'abord, nous appellerons pianemt, qui 
entamera la destruction de I 'avion. Ensuite, nous supprimerons la balle. N ous augmenterons la somme 
des avions touches et reafficherons le code du jeu. Enfin, nous cesserons d'examiner les collisions 
pour cet avion et passerons a la balle suivante dans la liste : 

// Verification des collisions 

public function checkForHits(event:Event) { 

f or(var bulletNum: int=bullets . length - 1 ; bulletNum>=0; bulletNum- - ) { 

for (var airplaneNum: int=airplanes.length-1 ;airplaneNum>=0;airplaneNum- - ) { 
if (bullets [ bulletNum] . hitTestObject (airplanes [airplaneNum] ) ) { 
airplanes[airplaneNun] .planeHit( ) ; 
bullets[bulletNum] .deleteBullet() ; 
shotsHit++; 
showGaneScore( ) ; 
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break; 

} 

} 

} 

if ((shotsLeft == 0) && (bullets. length ==0)) { 
endGame( ) ; 

} 

} 

A la fin de la fonction, nous verifierons si la partie est term i nee. C'est le cas lorsqu'il neresteplusde 
munitions et que la derniere balle a quitte I'ecran ou a touche un avion. 

Gestion de I'entree clavier 

Les deux fonctions suivantes gerent les appuis sur les touches. Nous les avons rencontrees toutes les 
deux auparavant : 

// Touche enfoncee 

public function keyDownFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if (event. keyCode == 39) { 

rightArrow = true; 
} else if (event. keyCode == 32) { 

fireBullet() ; 

} 

} 

// Touche relachee 

public function keyUpFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = false; 
} else if (event. keyCode == 39) { 

rightArrow = false; 

} 

} 



Pour creer une nouvelle balle lorsque lejoueur appuiesur la barre d'espace, nous creons simplement 
I'objetet I'alimentons en lui fournissant Tempi acementdu canon etla vitessedela balle (dans le cas 
present, 300 pixels par seconde). 
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Nous ajoutons la balle au tableau bullets et soustrayons une unite a shotsLeft. Nous mettrons 
egalement a jour le score. 

Vous remarquerez qu'avant que quoi que ce soit ne se passe nous verifions shotsLeft afin de nous 
assurer que le joueur possede encore des munitions a tirer. Cette verification evite que le joueur ne 
recuperequelques balles supplementaires a la fin du jeu : 

// Nouvelle balle creee 
public function fireBullet() { 

if (shotsLeft <= 0) return; 

var b:Bullet = new Bullet(aagun.x,aagun.y, -300) ; 

addChild(b); 

bullets. push(b) ; 

shotsLeft - - ; 

showGameScore () ; 

} 

Autres fonctions 

Nous avons maintenantappele showGameScore plusieursfois. Cette petite fonction place simplement 
shotsmt et shotsLeft dans des champs texte sur la scene. 1 1 s'agit non pas de champs texte que nous 
avons crees dans le code mais de champs que j'ai places manuellement dans la scene de I'animation 
d'exemple. J e ne souhaitais pas encombrer cet exemple avec du code TextFieid et TextFormat : 

public function showGameScore ( ) { 

showScore.text = String ( "Score: "+shotsHit); 
showShots.text = String( "Shots Left: "+shotsLeft) ; 

} 

Si jen'ai pascree les champs texte dans le code, j'ai cependant besom de I ' i nstructi on import 
flash, text. TextFieid; ail debut de la classe. Cette bibliotheque est necessaire non seulement 
pour creer les champs texte, mais egalement pour y acceder. 



Les deux fonctions suivantes suppriment simplement un element d'un tableau. La boucle for...in est 
utilisee pour parcourir le tableau et la commande splice, pour supprimer I' element unefois qu'il est 
trouve. La commande break est utilisee pour quitter la boucle unefois la correspondence trouvee. 

Nous avons besoin d' une fonction pour supprimer un avion du tableau airplanes et d' une autre pour 
supprimer une balle du tableau bullets : 

// Retirer un avion du tableau 
public function removePlane(plane:Airplane) { 
for(var i in airplanes) { 
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if (airplanes[i] == plane) { 
airplanes. splice(i, 1 ) ; 
break; 

} 

} 

} 

// Retirer une balle du tableau 
public function removeBullet(bullet:Bullet) { 
for(var i in bullets) { 

if (bullets[i] == bullet) { 
bullets. splice(i,1 ) ; 
break; 

} 

} 

} 

Nous pourrions utiliser une unique fonction en lieu et place de removePiane et de removeBuiiet. 
Cette unique fonction se verrait passer a la fois le tableau et I'element a trouver. En utilisant des 
fonctions separees, nous prenons des dispositions en prevision du developpement futur du jeu, ou la 
suppression des avions et des balles pourrait avoir d'autres effets. Par exemple, la suppression d'un 
avion pourrait etre le signal pour appeler setNewPiane au lieu que cette operation se produise juste 
apres qu'un avion eut ete cree. 

Nettoyage apres la partie 

Lorsqu' une parti esetermine, il reste des elements de jeu a I'ecran. Noussavons que toutes I es balles 
sont parties parcequ'il s'agitd'une condition qui adu etre remplie pour que la partie setermine. Les 
avions et I e canon sont en revanche toujours la. 

Nous n'avons pas stocketous les objets d'affichage dans un unique tableau comme nous I'avions fait 
pour lejeu de deduction du precedent chapitre. A u lieu decela, nous les avons places dans le tableau 
airplanes, la variable aagun et le tableau bullets, que nous savons etre maintenant vide. 

Apres avoir supprime les avions et le canon, nous devons egalement supprimer les ecouteurs clavier 
et I'ecouteur evenementiel cneckForHits. Le Timer nextPiane doit egalement etre nettoye. Ensuite, 
nous pouvons passer a I'imagegameover sans qu'aucun element de jeu netrainealentour : 

// La partie est terminee, supprimer les clips 
public function endGame() { 
// Supprimer les avions 

for(var i:int=airplanes.length-1 ;i>=0;i- -) { 
airplanes[i] .deletePlane( ) ; 
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} 

airplanes = null; 

aagun.deleteGun( ) ; 
aagun = null; 

stage . removeEventListener (KeyboardEvent . KEY_D0WN, keyDownFunction) ; 
stage. removeEvent Listener (KeyboardEvent .KEYJJP, keyUpFunction) ; 
removeEventListener (Event . ENTER_FRAME, checkForHits) ; 

nextPlane. stop( ) ; 
nextPlane = null; 

gotoAndStop( "gameover" ) ; 

} 

Aprescettefonction, vousaurez besoin dedeux accolades supplemental res afin de refermer la classe 
et le paquetage. 

L'un des interets del 'utilisation de champs textecrees manuellement dans I e scenario principal au lieu 
de champs A ctionScri pt tient a cequ'ils resteront pour I' image gameover. Lejoueur pourra ainsi voir 
son score dans la derniere image. 

Modifier le jeu 

L'animation AirRaid.fla contient les memes scripts d'image et boutons que I'animation Deduction, 
fla du precedent chapitre. L'image intro contient un bouton Start et I'image gameover, un bouton 
P I ay A gai n. L ' i mage i ntermedi ai re est appel ee play . 

Dans ce jeu, j'ai egalementajoute des instructions a l'image intro. La Figure 5.7 presentela premiere 
image avec ses instructions, son titre, son bouton Start et les champs texte en bas qui seront utilises 
dans lejeu. 

Cejeu peutetreamelioreenajoutantplusd'avionsouenameliorantlegraphismedesavions. L'arriere- 
plan et I e canon peuvent aussi etre redessines. 

Dans le code, vous pouvez faire varier la frequence d'apparition des avions et leur vitesse de 
deplacement. Vous pourriez meme accelerer ces mouvements a mesure que la partie progresse. 

Vous pouvez egalement changer le nombre de munitions dont dispose lejoueur. 

D'autres modifications plus radicales pourraient amener a changer entierement I e theme du jeu. Vous 
pouvez recreer l'un de ces anciens jeux de sous-marin en transformant les avions en bateaux et le 
canon en periscope de tir. Dans ce cas-la, je ralentirais personnel lement la vitesse des balles et 
utiliserait des graphismes d'arriere-plan elabores pour donner plusde profondeur a la scene. 
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Figure 5.7 

L'image intro contientdes 
instructions et un bouton Start. 



i~i^i-«-Jj 



I Fichier Affichage Controle Deboguer 



AIR RAID 

Use the left and right arrow keys to move the 
anti-aircraft gun. Press the spacebar to fire. Try 
to shoot down as many planes as you can before 
you run out of ammunition. 




Casse-brique 



Codes sources 

)t><- http://flashgameu.com 

A3GPU05_PaddleBall.zip 



Air Raid impliquait un simple mouvement a une dimension pour une variete d'objets et des collisions 
qui conduisaient a detruire les objets. Ce nouveau jeu de casse-brique (en anglais, Paddle Ball) inclut 
des mouvements diagonaux et des collisions qui provoquent des rebonds. 

Le casse-brique a ete popularise par I'ancien jeu video Breakout. Des versions dece jeu apparaissent 
souvent sur Internet et sont meme devenues des standards sur bien des telephones portables et des 
iPod. 



La version d'origine de Breakout pour Atari, en 1976, a ete developpee par Steve J obs et 
Steve Wozniak, avant qu'ils nefondent Apple Computer. La conception compacte de puce de 
Wozniak pour le jeu n'a pas fonctionne avec le processus de fabrication d'Atari et a done ete 
abandonnee. 

Des versions de Breakout sont apparues en serie dans de nombreuses versions du systeme 
M ac OS. Aujourd'hui encore, elles sont incluses dans la plupart des iPod. 
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Dans cette version dujeu de casse-brique, lejoueur control e en bas del'ecran une raquette qu'il peut 
deplacer a gauche et a droite a I'aide de la souris. Le principal element actif du jeu est une balle qui peut 
rebondirsur les cotes, les murseten haut maisqui file en bas del'ecran si la raquette ne la renvoiepas. 

En haut de I'ecran se trouve un certain nombre de briques rectangulaires que lejoueur doit eliminer 
en dirigeantla balle vers elleavec la raquette. 

Configurer I'animation 

L'animation est organisee comme Air Raid et Deduction. La premiere image s'appelle intro et la 
troisieme, gameover. Elles contiennent chacune des boutons pour demarrer un nouveau jeu et des 
instructions dans la premiere. 

L'image du milieu est intitulee play. C'est a cet endroit que se trouve le jeu. Nous avons dessine ici 
une bordure, un champ texte au milieu pour les messages tels que "Click to Start" (cliquez pour 
commencer) et un autre en bas a droite pour indiquer au joueur le nombre de balles restantes. La 
Figure 5.8 presente ces trois elements surf ond noir. 

Figure 5.8 

Le champ texte du milieu 
est intitule gameMessage 

etcelui du bas a droite, 

ballsLeft. 




Balls: 0 



La bibliotheque dans ce clip est egalement un peu plus encombree que dans les jeux que nous avons 
examines jusque-la. La Figure 5.9 presente la bibliotheque avec le nom de classe des clips auxquels 
nos scri pts accederont. 

Vous remarquerez qu'il y a un clip Brick et un clip Brick Graphic ainsi qu'un clip Paddle et un clip 
Paddle Graphic. Le second element de chaque paire est contenu dans le premier. Le clip Brick 
Graphic est ainsi le seul et unique element dans Brick. 

L'interet de cette approche tient a ce qu'elle nous permet aisement d'appliquer un filtre a ces elements. U n 
filtre, comme lefiltre B iseau que nous utiliserons ici, peut etre applique dans I'inspecteur des proprieties du 
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cl ip. C omme Brick et Paddle seront tous deux crees par A ctionScript, nous ne pouvons cependant pas 
leur appliquer ces filtres decette maniere. Voila pourquoi nous avons un Brick Graphic a I'interieur 

de Brick. 

Le clip Brick Graphic se verra appliquer le filtre. Ensuite, nous pourrons creer une copie de Brick 
en A ctionScript sans le moindre souci. 



Figure 5.9 

La bibliotheque compte 
sept elements, dontla balle, 
les briques et la raquette. 



J Bibliotheque 
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B Brick Graphic 

B Paddle 
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Clip 
Clip 
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Exporter: BasicButton 
Exporter: Brick 
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Nous pourrions appliquer le filtre avec le code ActionScript egalement, mais il faudrait du 
code supplemental re qui ne concerne pas veritablement le jeu. L' autre raison pour I a quel I e 
II est preferable de conserver les reglages de filtre en dehors du code ActionScript tient a ce 
que ces elements peuvent etre laisses au soin d'un artiste graphiste qui travaille avec le pro- 
grammeur. II est plus simple pour les artistes de creer des graphismes et d'appliquer des fil- 
tres que de dependre du programmeur pour cela. 



La Figure 5.10 presente I e clip Brick, avec le clip Brick Graphic a I'interieur. Vouspouvez egalement 
voir I'inspecteur des propriet.es avec les parametres de filtre. 



Definition de classe 

A la difference du jeu A ir Raid, celui-ci utilise une unique classeA ctionScript pour tout controler. Cette 
classe a besoin derenfort, notammentavec gemmer, la classe Rectangle et la classe TextFieid : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 
import flash. geom. Rectangle; 
import flash. text. TextFieid; 
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De nombreuses constantes doivent etre considerees dans ce jeu. La liste suivante s'explique 
relativement bien d'elle-meme. Elle inclut les positions et dimensions de nombreux elements dans le 
jeu, comme la balle, les murs et la raquette : 

public class PaddleBall extends MovieClip { 
// Constantes environnementales 
private const ballRadius: Number = 9; 
private const wallTop: Number = 18; 
private const wallLeft: Number = 18; 
private const wallRight: Number = 532; 
private const paddleY:Number = 380; 
private const paddleWidth: Number = 90; 
private const ballSpeed: Number = .2; 
private const paddleCurve:Number = .005; 
private const paddleHeight: Number = 18; 

Les deux seuls objets qui se deplacent dans ce jeu sont la balle et la raquette. En outre, nous avons 
besoin d'un tableau pour stacker les briques : 

// Objets cles 

private var paddle: Paddle; 

private var ball: Ball; 



// Briques 

private var bricks:Array; 
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Nous utiliseronsdeux variables pour survei Her la velocite de la balle : baiiDx et baiiDY. Nous aurons 
egalement besoin d'une variable lastTime, comme dans Air Raid : 

// Velocite de la balle 
private var ballDX: Number; 
private var ballDY:Number; 

// Minuteur de 1' animation 
private var lastTime :uint; 



La velocite est une mesure combinant vitesse et direction. U ne variable comme dx mesure la 
vitesse horizontale d'un objet. M ais une combinaison de variables comme dx et dy mesure a 
la fois la vitesse et la direction : autrement dit, la velocite. Sinon un jeu peut enregistrer la 
vitesse dans une variable (pixels par seconde) et la direction dans une autre (un vecteur ou 
un angle). Combinees, ces valeurs representent la velocite. 



U ne derniere variable definit le nombre de balles restantes. II s'agit du premier jeu que nous ayons 
creequi donneaujoueurun certain nombre de chances, ou devies, avantquelapartienesoitterminee. 
Lejoueur a trois balles a utiliser lorsqu'il joue. Lorsqu'il manque la troisieme, la parti e se term ine : 

// Nombre de balles restantes 
private var balls:Nunber; 

II n'y aura pas de fonction constructeur pour ce jeu car nous attendrons la deuxieme image pour 
demarrer. Nous laissons done de cote la fonction PaddieBaii. 

Demarrer le jeu 

Lorsque le jeu est demarre, la raquette, les briques et la balle sont creees. La creation du motif de 
briques estdelegueea une autre fonction. Nous rexamineronsensuite. 

Le nombre de balles est fixe a trois et le message de jeu initial est place dans le champ texte. 
lastTime est egalement positionne a zero. Nous ne procedions pas ainsi auparavant, puisque nous 
lui attribuions la valeur de getTimer. Je m'expliquerai sur ce point lorsque nous en viendrons aux 
fonctions d'animation qui utilisent lastTime. 

Deux ecouteurs sont definis. Le premier appelle simplement la fonction moveObjects a chaque 
image. Le second est un ecouteur evenementiel place dans la scene pour capturer les dies de 
souris. Nous allons demander au joueur de cliquer pour demarrer (message "Click to Start"). 
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Nous devons done capturer ce die et I'utiliser en executant newBaii : 

public function startPaddleBall() { 

// Creer la raquette 
paddle = new Paddle ( ) ; 
paddle. y = paddleY; 
addChild(paddle) ; 

// Creer les briques 
makeBricks( ) ; 

balls = 3; 

gameMessage.text = "Click To Start"; 

// Configurer 1' animation 
lastTine = 0; 

addEventListener ( Event . ENTER_FRAME,moveObjects) ; 
stage. addEvent Listener (MouseEvent. CLICK, newBall) ; 

} 

La fonction makeBricks cree une grille de briques. II y aura huit colonnes en largeur et cinq lignes en 
hauteur. Nous utiliserons une boucle imbriquee avec des variables x et y pour creer I'ensemble des 
quarante briques. Lespositionsdechaquebriquecorrespondentadesespacesde60 pixels verticalement 
et 20 horizontal ement, avec un decalage de 65 et 50 pixels : 

// Creer la collection de briques 
public function makeBricks () { 
bricks = new Array) ) ; 

// Creer une grille de briques, 5 verticalement et 8 horizontalement 
for(var y:uint=0;y<5;y++) { 
for(var x:uint=0;x<8;x++) { 

var newBrick:Brick = new Brick(); 

// Les espacer harmonieusement 

newBrick.x = 60*x+65; 

newBrick.y = 20*y+50; 

addChild(newBrick) ; 

bricks. push(newBrick) ; 

} 

} 

} 
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Lorsde la creation de foncti ons d'organisation de ce type, necraignez pas d'effectuer quelques 
experimentations avec les nombres afin d'obtenir le resultat desire. Par exemple, j'ai teste dif- 
ferents nombres dans la foncti on makeBricks jusqu'a obtenir une disposition des briquesqui ait 
bonne apparence. J 'aurais evidemment pu calculer I'espacement et le decalage sur papier 
auparavant, mais il eta it plus simple et plus rapide de proceder a quelques essais avises. 



ActionScriptest un excel lent environnement pour I' experimentation et la decouverte. Vous n'avez pas 
besoin de prevoir les moindres details avant de taper la premiere ligne de code. 

L'un des avantages lies au fait de deleguer la creation des briques a sa propre foncti on tient a ce que 
vous pouvez la remplacer par une fonction qui produit differents motifs de briques. Cette fonction 
pourrait meme recuperer dans une base de donnees un schema definissant la disposition des differents 
mursde briques. 

Tous les changements que vous apportez au motif sont isoles dans un unique appel a makeBricks. II 
est done aussi aise de travail ler avec un second programmeur qui s'occupe de la disposition des 
briques pendant que vous travaillez sur la logiquedu jeu lui-meme. 

La Figure 5.11 presentelejeu au debut, avec la balle, la raquetteet les briques. Vous pouvez egalement 
voir les murs, qui ont un simple role esthetique. La balle rebondira sur les murs invisibles que nous 
avons crees en definissant waiiLef t, waiiRight et waiuop. 



Figure 5.11 

Tous les elements de jeu 
apparaissentau tout debut 
du ieu. 



I PaddleBall.swf 



202 ActionScript 3.0 pour les jeux 



Lancer une nouvelle balle 

Lorsque lejeu commence, il n'y a pas de balle. A u lieu de cela, le message "Click to Start" apparait 
et le joueur doit cliquer sur la scene. Cette action appelle newBaii, qui cree un nouvel objet Bail et 
definit sa position et ses proprietes associees. 

Pour commencer, newBaii s' assure que ban vaut nun. Cette precaution empeche I'utilisateur de 
cliquer sur I'ecran pendant que la balle est deja en jeu. 

Ensuite, I e champ texte gameMessage est efface : 

public function newBall(event:Event) { 

// Ne pas executer ce code s'il y a deja une balle 
if (ball != null) return; 

gameMessage. text = ""; 

U nenouvelleballeestcreeeau centre exact de I'ecran, en uti I i sant I e poi nt a mi-chemin entrewaiiLeft 
et waiiRight et entrewaiiTop et la position verticale de la raquette : 

// Creer la balle, la centrer 
ball = new Ball( ) ; 

ball.x = (wallRight-wallLeft)/2+wallLeft; 
ball.y = 200;//(paddleY-wallTop)/2+wallTop; 
addChild(ball); 

La velocite de la balle est definie a la verticale exacte, a la vitesse definie par la constante baiispeed : 

// velocite de la balle 
ballDX = 0; 
ballDY = ballSpeed; 

La variable bails est reduite d'une unite et le champ texte en bas a droite est modifie afin d'afficher 
le nombre de balles restantes. lastTime est en outre repositionne a zero afin que le chronometreur de 
I 'animation recommence a zero : 

// Utiliser une balle 
balls - - ; 

ballsLeft.text = "Balls: "+balls; 

// Reinitialiser 1' animation 
lastTime = 0; 

} 

Lafonction newBaii sera utiliseeau debut du jeu et egalement pour lancer une nouvelle balle en cours 
de parti e. 
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Animation du jeu et detection des collisions 

J usque-la, le code du jeu a ete plutot simple. Les choses se compliquent cependant lorsque Ton 
considerelesobjetsmouvants. La balle doit detecter les collisions avec la raquetteetavec les briques. 
Elle doit ensuite reagir a ces collisions de maniere appropriee. 

L'ecouteur evenementiel pour enter_frame appelle moveObjects a chaque image. Cette fonction 
delegue ensuite le travail a deux autres fonctions, movePaddie et moveBaii : 

public function moveObjects(event:Event) { 
novePaddle( ) ; 
moveBaii ( ) ; 

} 

Mouvement de la raquette 

La fonction movePaddie esttres simple. Elle positionne simplement la proprietex de la raquette en lui 
attribuantremplacementdemousex. E II eutil isecependant aussi Math, minet Math, max pourrestreindre 
I'emplacement aux cotes gauche et droit de la scene. 

Les proprietes mousex et mousey retournent I'emplacement du curseur par rapport a I'objet 
d'affichage courant. Dans lecas present, il s'agirait de la classe principale, qui equivaut a la 
scene. Si nous exa minions mousex et mousey depuis I' interieur d'uneclassedeclip, nousserions 
contra ints d'ajuster les resultats ou d' examiner plutot stage. mousex et stage. mousey. 

public function movePaddie ( ) { 

// Faire correspondre la valeur horizontale avec la souris 
var newX: Number = Math.min(wallRight-paddleWidth/2, 
Math . max (wallLef t+paddleWidth/2 , 
mouseX) ) ; 
paddle. x = newX; 

} 

Mouvement de la balle 

C'est moveBaii, la fonction qui deplace la balle, qui obtient la part du lion en matiere de code. Le 
mouvement de base est comparable a celui des objets mouvants du jeu Air Raid. En revanche, les 
collisions sont bien plus complexes. 

La fonction commence par une verification de bail afin des'assurer qu'elle nevaut pas null. Si c'est 
le cas, nous sommes entre deux balles et le reste peut etre ignore : 

public function moveBall() { 

// Ne pas executer ce code si entre deux balles 
if (ball == null) return; 
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Rappelez-vous que nous avons initialise la variable lastTime a zero au lieu de lui attribuer la valeur 
degetTimer. N ous avons procede ainsi afin que le temps requis pour creer les objetsdu jeu etdessiner 
I'ecran la premiere foisnesoit pas utilise pour determiner la quantite de la premiere etaped' animation. 
Par exemple, s'il faut 500 mil lisecondes pour que le jeu commence, getnmero moins lastTime 
vaudra 500 millisecondes ou plus. La balleferait ainsi un sacre bond avant que lejoueur n'ait meme 
la chance de pouvoir reagir. 



L'une des raisons pour I esquel I es ce jeu prend une demi-seconde environ pour commencer 
tient a son usage des filtres Biseau. Cette operation ralentit le debut du jeu pour generer les 
modifications de la representation visuelle des briques et de la raquette. Elle ne ralentit en 
revanche pas le jeu ensuite. 

En faisant commencer lastTime a zero, nous pouvons le reconnaitre ici dans la fonction d'animation 
et obtenir une nouvelle valeur pour lastTime. Cela signifie que, la premiere fois dans la fonction, 
timePassed vaudra en toute vraisemblance zero. Ce n'est pas un probleme et nous pouvons en 
revanche ainsi nous assurer que le minuteur de I'animation ne tourne pas tant que nous n'en sommes 
pas au point d'appeler moveBaii la premiere fois : 

// Calcul du nouvel emplacement pour la balle 
if (lastTime == 0) lastTime = getTimer(); 
var timePassed :int = getTimer( ) -lastTime; 
lastTime += timePassed; 
var newBallX = ball.x + ballDX*timePassed; 
var newBallY = ball.y + ballDY*timePassed; 

Detection des collisions 

Pour demarrer notre detection des collisions, nous recupererons le rectangle de la balle. En fait, nous 
al I ons obteni r deux versi o ns di ff erentes d u rectangle : I e rectangle actuel dela balle, appeleoidBaiiRect, 
et le rectangle de la balle si elle devait terminer son mouvement sans contrainte, appele newBaiiRect. 



L'objet Rectangle est un pa rfa i t exemple d'objet capable d'apporter des complements d' infor- 
mation a parti r des donneesdontvous I'alimentez. Vous lui fournissezune position * ety etune 
largeur etune hauteur, mais vous pouvez lui demander des informations interpretees comme les 
bords superleur, inferieur, gauche et droit du rectangle. Vous pouvez obtenir des objets point 
pour les coins (par exemple, bottommght pour lecoin inferieur droit). Nous uti I iserons les cotes 
superieur, inferieur, gauche et droit du rectangle dans nos calculs. 



Notre manieredecalculer oidBaiiRect et newBaiiRect consistea utiliser les positions x ety, plusou 
moins le rayon de la balle (baiiRadius). Par exemple, baii.x-baiiRadius nous donne la position x 
et baiiRadius*2 nous donne la largeur. 
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Nous calculons le rectangle de la raquette (paddieRect) dela meme maniere : 



var oldBallRect = new Rectangle(ball.x-ballRadius, 
ball.y-ballRadius, ballRadius*2, ballRadius*2) ; 

var newBallRect = new Rectangle(newBallX-ballRadius, 
newBallY-ballRadius, ballRadius*2, ballRadius*2) ; 

var paddieRect = new Rectangle(paddle.x-paddleWidth/2, 
paddle. y-paddleHeight/2, paddleWidth, paddleHeight) ; 



M aintenant que nous avons ces trois rectangles a disposition, nous pouvons les utiliser pour voir si la 
balle a touche la raquette. Cela se produit lorsque le bas de la balle f ranchit le haut de la raquette. II 
est cependant plus dur qu'il n'y parait de determiner ce moment. Nous ne souhaitons pas simplement 
savoi r si le bas de la balle a passe le bas de la raquette. N ous souhaitons savoi r que cela vient tout j uste 
de se passer, exactement a cette etape de I'animation. La veritable question a poser est done la 
suivante: le bas de la balle a-t-il franchi le haut de la raquette et le bas de la balle se trouvait-il 
precedemment au-dessus du haut de la raquette ? Si ces deux conditions sont reunies, la balle vient 
juste de franchi r la raquette. La Figure 5.12 i I lustre ce problemede maniere graphique. 

Figure 5.12 y 

Le diagramme presente la balle a I'image 



Un autre test doit etre realise. Nousdevons savoi r si I'emplacement horizontal dela balle correspond 
a celui de la raquette. A insi, si le cote droit de la balle est superieur au cote gauche de la raquette et si 
par ailleursle cote gauche dela balle est inferieurau cote droit dela raquette, nous avons effectivement 
une collision. 

En cas de collision, la balle doit etre deviee vers le haut. II suffit pour cela d'inverser la direction de 
baiiDY. En outre, il convient de definir un nouvel emplacement pour la balle. Celle-ci ne peut tout de 
meme pas rester a I'interieur de la raquette telle qu'elle s'y trouve maintenant (voir Figure 5.12). 

La distance au-dela du haut dela raquette est done calculeeet la balle est deviee vers le haut de deux 
fois cette distance (voir Figure 5.13). 



// Collision avec la raquette 
if (newBallRect. bottom >= paddieRect. top) { 
if (oldBallRect. bottom < paddieRect. top) { 
if (newBallRect. right > paddieRect. left) { 
if (newBallRect. left < paddieRect . right) { 



precedente et la balle telle qu'elle se 
positionneraitsi son mouvementn'etait 
pas freine. La balle a franchi la raquette 
et doit etre deviee. 




<-oldBallRect.bottom 
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// Rebond 

newBallY -= 2* (newBallRect . bottom - paddleRect.top) ; 

ballDY *= -1; 

// Calcul du nouvel angle 

ballDX = (newBallX-paddle.x)*paddleCurve; 

} 

} 



Figure 5.13 

La balle avance legerement 
dans la raquette et se trouve 
done placee a la meme distance 
a I'ecartde la raquette. 



Nouvel 

emplacement 
du bas < 



Deviation = 

2 x distance 

du depassement 



"3= 



■ Distance 
du depassement 



Emplacement prevu du bas 



Si la vitesse verticale de la balle est simplement inversee, la vitesse horizontal e baiiDx se voit pour sa 
part attribuer une toute nouvelle valeur. Cette valeur est determinee par la distance a partir du centre 
de la raquette. E lie est multipliee par une constante paddiecurve. 

L'idee est ici que lejoueur doit dinger la balle; s'il se contente de toucher la balle avec le plat de la 
raquette, celle-ci ne prendra pas d'autre angle que celui avec lequel el le a commence. Le jeu serait 
impossible a jouer. 

L'effet de ce systeme est que I a bal I e rebondi t vers I e haut et I e bas au centre de I a raquette et part avec 
un angle de plus en plus prononcea mesurequel'on s'approchedesesextremites. 

Si la ballea passe la raquette, il n'y a pas deretour possible. Nousnesupprimonscependant pas tout 
de suite la balle. Nous I'autorisons plutot a continuer jusqu'a ce qu'elle atteigne le bas de I'ecran, 
apres quoi el I e est final ement supprimee. 



L'un des moyens courants de representer ce principe consiste a faire apparaftre une legere 
courbesur la partie superieure de la raquette. C et effet suggereau joueur l'effet produit I orsque 
la balle frappe la raquette. Comme ce comportement a ete adopte dans tous les jeux de casse- 
bri que depuis, la pi upart des joueurs le presupposent quoi qu'il en soit. 
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S'il s'agit de la derniere balle, la partie est term i nee et la fonction endGame est appelee. Sinon le 
champ gameMessage est rempli avec I e texte "Click For Next Bail". Comme la variable bail est 
positionnee a nun, la fonction moveBaii n'agit plus sur rien et la fonction newBaii accepte le die 
suivant comme un declencheur pour creer une nouvelle balle. Nous pouvons et devons quitter cette 
fonction maintenantavec unecommande return. Inutilede verifier les collisions avec lesmurs ou les 
briquessi la balle a disparu : 

} else if (newBallRect.top > 400) { 
removeChild(ball) ; 
ball = null; 
if (balls > 0) { 

gameMessage. text = "Click For Next Ball"; 
} else { 

endGame () ; 

} 

return; 

} 

} 

Ensuite, nous testons les collisions avec les trois murs. Ces verifications sont plus simples parce que 
la balle ne doit jamais depasser I'un d'entre eux. Dans chaque cas, la vitesse verticaleou horizontale 
est inversee et I 'emplacement de la balle est altere de la meme maniere que pour les collisions avec la 
raquette, de sorte que la balle ne se trouve jamais "dans" les murs : 

// Collision avec le mur superieur 
if (newBallRect.top < wallTop) { 

newBallY += 2*(wallTop - newBallRect.top); 

ballDY *= -1; 

} 

// Collisions avec le mur gauche 
if (newBallRect.left < wallLeft) { 

newBallX += 2* (wallLeft - newBallRect.left); 

ballDX *= -1; 

} 

// Collisions avec le mur droit 

if (newBallRect. right > wallRight) { 

newBallX += 2* (wallRight - newBallRect . right) ; 

ballDX *= -1; 

} 
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Pour calculer la collision avec les briques, nous devons parcourir en boucle toutes les briques et les 
verifier une a une. Pourchacuned'entre el les, nouscreonsun brickRect afin depouvoiracceder aux 
bordssuperieur, inferieur, gauche et droit de la briqueaussi facilementqu'avec la balle. 

Normal ement, lorsque vous souhaitez parcourir en boucle un tableau d'objetsafin de verifier 
s'il y a une collision, vous devez lefaire en sens inverse, afin de pouvoir supprimer des objets 
dans la liste sans en sauter aucun. Cette fois, nous pouvons avancer normalement car, une 
fois que la balle entre en collision avec une brique, nous cessons de rechercher des collisions 
(une seule collision dolt en effet se produire a la fois). 

II est aise de detecter une collision avec une brique, maisdeja plus difficile d'y reagir. Commenous 
avons un Rectangle pour la balle et un pour la brique, nous pouvons utiliser la fonction intersects 
pourvoirsi lenouvel emplacement de la ballesetrouvea I'interieur d'une brique. 

Si c'est le cas, il faut determiner quel cote de la brique a ete touche. Une serie de tests compare les 
cotes de la balle aux cotes opposes des briques. Lorsqu'un cote chevauche a ete trouve, la balle est 
deviee dans la direction appropriee et son emplacement est ajuste : 

// Collision avec les briques 

for(var i:int=bricks.length-1 ;i>=0;i- -) { 

// Recuperation du rectangle de la brique 

var brickRect: Rectangle = bricks[i] .getRect(this) ; 

// Y a-t-il une collision avec une brique ? 
if (brickRect . intersects (newBallRect) ) { 

// La balle frappe le cote gauche ou droit 
if (oldBallRect. right < brickRect. left) { 

newBallX += 2*(brickRect.left - oldBallRect . right) ; 

ballDX *= -1 ; 
} else if (oldBallRect. left > brickRect. right) { 

newBallX += 2* (brickRect. right - oldBallRect. left) ; 

ballDX *= -1; 

} 

// La balle frappe le haut ou le bas 
if (oldBallRect. top > brickRect. bottom) { 
ballDY *= -1 ; 

newBallY += 2* (brickRect. bottom -newBallRect. top) ; 
} else if (oldBallRect. bottom < brickRect .top) { 
ballDY *= -1 ; 

newBallY += 2*(brickRect.top - newBallRect. bottom) ; 

} 
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Si la balle est entree en collision avec une brique, cette derniere doit etre suppri rn.ee. En outre, si le 
tableau bricks est vide, la parti e est term i nee. Nous souhaitons egalement utiliser return ici parce 
que, si la partie est terminee, il n'est pas necessaire de definir I' emplacement de la balle a la fin de 
cette fonction ou derechercherd'autres collisions : 

// Supprimer la brique 
removeChild(bricks[i] ) ; 
bricks .splice(i, 1 ) ; 
if (bricks. length < 1 ) { 

endGame( ) ; 

return; 

} 

} 

} 

// Definir nouvelle position 
ball.x = newBallX; 
ball.y = newBallY; 

} 

L'un des aspects importants decejeu tient a cequ'il existe deux modes dejeu veri tables : le premier 
concerne le cas ou la balle est en jeu et le deuxieme, celui ou lejoueur doit cliquer sur I'ecran pour 
creer une nouvelle balle. Le code determine le mode en cours en examinant la valeur de bail. Si el le 
vaut null, lejeu se trouve dans le deuxieme mode. 

Fin de partie 

La partie se termine dans deux cas de figure : lorsque lejoueur perd la derniere balle ou lorsque la 
balle atteint la derniere brique. 

Comme dans A ir Raid, nous utilisons la fonction endGame pour nettoyer tous les clips restants. Nous 
positionnons egalement les references a ces clips a nun afin que le lecteur Flash puisse les supprimer 
de la memoire. 

II est important de s' assurer que la balle n'est pas deja partie car el I e I e sera si la fonction endGame est 
appelee lorsque la derniere balle est perdue. 

Nous devons egalement supprimer les ecouteurs, a la fois celui qui appelle moveobjects a chaque 
image et celui qui ecoute les dies de souris : 

function endGame() { 

// Supprimer la raquette et les briques 
removeChild(paddle) ; 

for(var i:int=bricks.length-1 ;i>=0;i- -) { 
removeChild(bricks[i] ) ; 
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} 

paddle = null; 
bricks = null; 
// Supprimer la balle 
if (ball != null) { 

removeChild(ball) ; 

ball = null; 

} 

// Supprimer les ecouteurs 

removeEvent Listener (Event . ENTER_FRAME, moveObjects) ; 
stage. removeEvent Listener (MouseEvent . CLICK, newBall) ; 

gotoAndStop( "gameover" ) ; 

} 

A la fin du code, n'oubliez pas les accolades fermantes afin de refermer la classe et le paquetage. 
Modifier le jeu 

Ce jeu a vraiment besoin de sons. Vous pouvez les ajouter facilement en utilisant les exemples du jeu 
de Memory du C hapitre 3. Un bon depart pourrait consister a en proposer un pour la frappe sur la 
raquette et un autre lorsque la balle atteint une brique. II serait aussi interessant d'en emettre lorsque 
la balle touche les murs ou lorsque la balle est manquee. 

II pourrait egalement etre interessant d'afficher des briques de couleurs differentes, par exemple en 
utilisant plusieurs images dans le clip Brick Graphic puis en accedant chaque fois a I'image 
appropriee. Chaque ligne pourrait se voir ainsi attribuer sa propre couleur. 

Lecalcul du score est interessant, mais il netemoigne pas clairementd' une reel le progression dans le 
jeu. II fonctionneraitmieux si vous pouviez creer plusieurs niveaux. Lesautres niveaux pourraientetre 
configures en augmentant progressivement la vitesse de la balle ou en presentant d'autres dispositions 
pour les briques. 

Lorsque le joueur a detruit toutes les briques, il serait interessant de faire disparaitre la balle et 
d'afficher un message invitant le joueur a cliquer pour acceder au niveau suivant. En cliquant, le 
joueur ferait ainsi apparaitre non seulement une nouvelle balle mais egalement un nouveau groupe de 
briques. 



Puzzles d'images 
et puzzles coulissants 

Au sommaire de ce chapitre : 

• Manipulerdes images bitmap 

• J eu de puzzle coulissant 

• J eu de puzzle classique 
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II existetouteunegammedejeux qui utilisentdes photographies ou desdessins detail les. Les puzzles 
sont assez nouveaux dans I'univers des ordinateurs car il a fallu attendre la moitie des annees 1990 
pour que les ordinateurs grand public soient dotes de capacites graphiques suffi santes pour afficher 
des images dequalite. 

Flash peutimporterun certain nombrede formats d'i mage differents. II nesecontentepourtantpasde 
les importer. Vous pouvez en fait acceder aux donnees bitmap et manipuler les images. On peut ainsi 
decouper des images et les utiliser dans des puzzles. 



F lash prend en charge les formats defichier J PG, GIF et PNG . Le format J PG est ideal pour 
les photographies parce qu'il compresse bi en les donnees d'image et permet de determiner 
la quantite de compression a utiliser au moment de creer le fichler. Le format GIF est un 
autre format compresse qui convient mieux aux dessins incluant un nombre limite de cou- 
leurs. Le format PNG propose une tres bonne compression et une excel lente qualite a pleine 
resolution. Tous ces formats peuventetrecrees par Fi reworks ou Photoshop d' Adobe, qui sont 
fournis avec F lash dans certains packs d'Adobe. 



Examinons rapidement les notions fondamentales liees a importation et a la manipulation des 
images. Ensuite, nous etudierons deux jeux qui utilisent des pieces de jeu provenant d'images 
importees et decoupees en morceaux. 



Manipuler des images bitmap 



Codes sources 

^^t^c http://flashgameu.com 
A3GPU 06 Bitmap.zip 



Avant de pouvoir s'amuser avec une image bitmap, il faut commencer par I'importer. Vous pouvez 
egalement utiliser une image bitmap dans la bibliotheque en lui attribuant simplement un nom de 
classeeten y accedantdecettemaniere. L' importation d'une image bitmap externeestcependant bien 
plus souple pour presque tous les usages. 

Charger une image bitmap 

L'objet Loader est une version speciale du sprite qui recupere ses donnees a partir d'une source 
externa Vous aurez besoin de I'apparier avec un uRLRequest, qui gere I'acces aux fichiers reseau. 

Voici une classe tres simple qui charge un unique fichier JPG et le positionne a I'ecran. Apres avoir 
cree un nouveau Loader et un nouveau URLRequest, nous les apparions avec la commande load. 
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Le processus completneprend que troislignes decode. Ensuite, nousutilisonsaddChiid pourajouter 
I'objet Loader a la scene, exactement comme pour un objet d'affichage normal tel qu'un sprite : 

package { 

import flash. display.*; 

import flash. net. URLRequest; 

public class BitmapExample extends MovieClip { 

public function BitmapExample () { 
var loader:Loader = new Loader(); 

var request: URLRequest = new URLRequest ( "myimage. j pg " ) ; 
loader . load ( request ) ; 
addChild(loader) ; 

} 

} 

} 

La Figure 6.1 presente une image bitmap chargee de cette maniere. Elle est positionnee dans le coin 
superieur gauche de I'ecran. Comme I'objet Loader agit a la maniere d'un objet d'affichage normal, 
nous pouvonsegalement definir sa position x et y de maniere a la centrer a I'ecran ou la situer ou nous 
le voulons. 

Figure 6.1 

Cette image bitmap a ete chargee 
a partir d'un fichier externe mais 
se comporte maintenant comme 
un objetd'affichage normal. 
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Si uRLRequest est au depart desti ne au travail sur les serveursWeb, il fonctionnera tout aussi 
bien sur votre disque dur pour vos tests. 



Ce mecanisme peut etre utile pour charger des images d' introduction ou d'instruction dans un jeu. Par 
exemple, le logo de votre entreprise peut apparaitre dans I'ecran d' introduction en uti I isantce simple jeu 
de commandes. Au lieu d'incorporer votre logo dans chaque jeu Flash, vous pouvez avec un unique 
fichier logcpng uti I i ser un Loader etun URLRequest pour I' importer etl'afficher. Deslors, vous n'aurez 
plus qu'a modifier directement votre fichier logo.png pour que tous vos jeux utilisent le nouveau logo. 



Decomposer une image bitmap en morceaux 

L e chargement et I ' affi chage d'une simple i mage bitmap sont uti les, mai s nous devons encore nous plonger 
dans les donnees et extraire les pieces du puzzle de I' image pour creer les jeux du reste de ce chapitre. 

La premiere modification que nous devons apporter a I' exemple simple precedent consiste a reconnaitre 
le moment auquel I'image bitmap a fini de se charger et ou nous pouvons commencer a la manipuler. 
Nous utiliserons pour cela un ecouteur Event .complete. N ous I'ajouterons a I'objet Loader et pourrons 
ensuite placer tout notre code de manipulation dans la fonction loadingDone qu'il appellera. 



En plus d' Event. complete, vous pouvez egalement obtenir le rapport d'avancement du tele- 
chargement d'une image. Examinez la documentation Flash concernant URLRequest afin 
d'obtenir d'autres exemples de suivi du chargement et decouvrir meme des moyens de cap- 
turer etde gerer les erreurs. 




Voici le debut de la nouvelle classe. Nous aurons besoin de la classe flash. geom par la suite. J'ai 
egalement place le code de chargement dans sa propre fonction appelee loadBitmap, afin qu'il soit 
aisea reporter dans les autres jeux du chapitre: 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. net. URLRequest; 
import flash. geom.*; 

public class BitmapExample extends MovieClip { 



public function BitmapExample ( ) { 
loadBitmap ( "test image. jpg" ) ; 

} 
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// Recuperer l'image a partir d'une source externe 
public function loadBitnap(bitnapFile:String) { 
var loader: Loader = new Loader(); 

loader .contentLoader Info. addEvent Listener (Event .COMPLETE, loadingDone) ; 
var request :URLRequest = new URLRequest (bitmapFile) ; 
loader. load(request) ; 

} 

Lorsque I' image est complement chargee, nousappelonslafonction loadingDone. Celle-ci s'occupe 
en premier lieu decreer un nouvel objet Bitmap. Elle prend pour cela les donnees de event. target, 
loader. content (autrement dit, la propriete content de I'objet Loader original) : 

private function loadingDone(event:Event) :void { 
// Recuperer les donnees chargees 

var image:Bitnap = Bitmap(event . target. loader. content) ; 

Nous pouvons obtenir la largeur et la hauteur de l'image bitmap en accedant aux proprietes width et 
height de la variable image maintenant qu'elle contient le contenu. Notre but est d'obtenir la largeur 
et la hauteur de chacune des pieces du puzzle. Pour cet exemple, nous aurons six colonnes et quatre 
lignes. L a largeur totale divisee par six nous donne done la largeur dechaque piece. La hauteur totale 
divisee par quatre nous donne la hauteur de chaque piece : 

// Calculer la largeur et la hauteur de chaque piece 
var pieceWidth: Number = image. width/6; 
var pieceHeight: Number = image. height/4; 

A present, nous parcourons en boucle les six colonnes et les quatre lignes afin decreer chaque piece 
du puzzle : 

// Parcours en boucle de toutes les pieces 
for(var x:uint=0;x<6;x++) { 

for (var y:uint=0;y<4;y++) { 

La creation des pieces du puzzle s'opere en creant d'abord un nouvel objet Bitmap. Nous specifions 
la largeur et la hauteur pour en creer une. Ensuite, nous utilisons copyPixeis pour copier une section 
de l'image d'origine dans la propriete bitmapData de la piece de puzzle. 

La commande copyPixeis prend trois parametres de base : l'image a partir de laquelle copier les 
donnees, le Rectangle specifiant la partie de l'image a obtenir et le Point, qui definit I'endroit ou le 
morceau de l'image ira dans la nouvelle image bitmap : 

// Creer une image bitmap de nouvelle piece de puzzle 

var newPuzzlePieceBitmap: Bitmap = new Bitmap (new BitmapData ( pieceWidth, pieceHeight) ) ; 
newPuzzlePieceBitmap . bitmapData . copyPixeis ( image . bitmapData, new Rectangle (x*pieceWidth , 
y*pieceHeight, pieceWidth, pieceHeight) , new Point (0,0) ) ; 
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Notre but en soi n'est pas d'avoir une image bitmap. Nous souhaitons avoir un sprite a afficher a 
I'ecran. Nous en creons done un nouveau et y ajoutons I'image bitmap. Ensuite, nous ajoutons le 
sprite a la scene : 

// Creer un nouveau sprite et y ajouter les donnees bitmap 
var newPuzzlePiece: Sprite = new Sprite(); 
newPuzzlePiece.addChild(newPuzzlePieceBitmap) ; 

/ / Ajouter a la scene 
addChild(newPuzzlePiece) ; 

Pour finir, nous devons definir I'emplacement des sprites. Nous souhaitons les positionner a I'ecran 
en fonction de leur colonneet de leur ligne, en ajoutant 5 pixels pour creer un espacement blanc entre 
les pieces. Nous decalons egalement les positions horizontale et verticale de toutes les pieces de 
20 pixels. La Figure 6.2 presente les vingt-quatre pieces du puzzle. 

// Definition de I'emplacement 
newPuzzlePiece. x = x* (pieceWidth+5)+20; 
newPuzzlePiece. y = y* (pieceHeight+5)+20; 



} 



} 



} 



Figure 6.2 

L' image importee est decomposer 
en vingt-quatre pieces qui sont 
espacees dans I'ecran. 



* P5l BitmapExample.swf 
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M aintenant que nous savons comment creer un ensemble de pieces de puzzle a parti r d'une image 
importee, nous pouvons commencer a creer les jeux qui utilisent ces pieces. Pour commencer, nous 
al Ions creer un simple puzzle coulissant. Nous creerons un jeu de puzzle plus complexe par la suite. 



Jeu de puzzle coulissant 



Codes sources 

)t£<" http://flashgameu.com 

A3GPU06 SlidingPuzzle.zip 



II est surprenant qu'un jeu comme le jeu de puzzle coulissant ait meme existe avant les ordinateurs. 
Lejeu physique qui a precede sa version informatique etait compose d'un petit carre en plastiquede 
taille reduite contenant generalement quinze pieces bloquees par de petits rails et des rainures 
entrecroises. II fallaitfaire glisser I' unedes pieces deplastique vers leseizieme emplacement inoccupe 
puis en faire glisser un autre vers le nouvel emplacement vide, et ainsi de suite. Ce processus se 
poursuivait jusqu'a ce que le puzzle se trouve entierement reconstitue. 

La version physique du jeu utilisait generalement non pas une image mais plutot des nombres al I ant 
de 1 a 15. D'ou son nom de bapteme : le puzzle-15. 



Le probleme avec ce jeu en plastique tenait a ce que les carres colngalent souvent, ce qui 
frustrait lejoueur, parfois accapare a debloquer les pieces recalcitrantes. En outre, une fois 
le puzzle resolu, II fallait deplacer aleatoirement les carres sans regarder pendant un long 
momentafin de retablir une configuration un tantsoit peu a I eatoi re. 



L a version informatique decejeufonctionnebeaucoupmieux. Pour commencer, vouspouvez proposer 
differents jeux de carres comme image. Vous pouvez proposer une nouvelle image a chaque fois, en 
offrant la possibil ite aux joueurs de decouvrir I'image a mesure que le puzzle se complete. En outre, 
I'ordinateur peut aleatoirement disposer les pieces du puzzle au debut de chaquejeu. Et tout cela sans 
se pincerlesdoigts. 

Dans notre version du jeu de puzzle coulissant, nousutilisonsun nombrevariabledepiecesdecoupees 
dans I'image. En outre, un melange aleatoire des carres s'opere au debut du jeu. Nous animons 
egalement les pieces qui se deplacent d'un endroit a un autre afin qu'elles paraissent glisser. Nous 
reconnaissons enfin le moment ou la solution est trouvee. 
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Configurer I'animation 

Cejeu utilise la meme structure a trois images que nous avons utilises aux deux derniers chapitres, avec 
les images intro, play et gameover. Des instructions sont aussi proposees dans la premiere image. 

Le seul graphisme requis est celui de I'image elle-meme. II s'agira d'un fichier d'imagej PG externe 
appele slidingimage.jpg N ous lui donnerons une taille de 400 pixels par 300. 



La taille d'image et la compression doivent etre prises en compte lors de la creation d'une 
image pour un jeu de ce type. Les trois images utilisees dans ce chapitrefont moms de 34 Ko. 
C hacune fait 400 x 300 avec une compression J PEG a 80 %. On pourrait a isement produi re 
une image vingt fois plus lourde avec une compression sans perte comme eel I e des fichiers 
PNG, ma is ce niveau de qualite n' est pas necessai re et neferait que ralentir I e temps de tele- 
chargement pour le joueur. 




Rappelez-vous que nous al Ions decouper I'image du puzzle puis supprimer la piece en bas a droite. 
Lejoueura besoin de cet espace vide pour operersesdeplacements. II est done preferablede choisir 
une image qui ne contient rien d'important en bas a droite. 

Configurer la classe 

Le jeu de puzzle coulissant a besoin des classes URLRequest et geom pour gerer I'image. Nous 
utiliserons egalement un objet Timer pour I'animation du glissement : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. net. URLRequest; 
import flash. geom.*; 
import flash. utils. Timer; 

II y a tout un tas deconstantes a definir pour cejeu, a commencer par I'espacemententreles pieces et 
le decalage general de toutes les pieces. Nous deciderons egalement du nombre de pieces a decouper 
dans I'image, qui estici de4 x3 : 

public class SlidingPuzzle extends MovieClip { 
// Espacement entre les pieces et decalage 
static const pieceSpace: Number = 2; 
static const horizOffset:Nunber = 50; 
static const vertOff set: Number = 50; 

// Nombre de pieces 

static const numPiecesHoriz:int = 4; 

static const numPiecesVert:int = 3; 
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Le nombre de colonnes et de lignes dans le puzzle devrait approximativement corresponds 
aux dimensions de I'image. Dans le cas present, nous savons qu'il s'agit d'images de 
400 pixels sur 300 et nous creons un puzzle de 4 x 3. Les pieces feront done 100 pixels sur 
100. On peut parfaitement creer des pieces rectangulaires, comme un puzzle 4 x 4 avec des 
pieces de 100 pixels sur 75, mais il semble tout de meme preferable de conserver des pieces 
plutot carrees. 



Pour disposer le puzzle de maniere aleatoi re au debut de la partie, nous allons operer une serie de 
deplacements aleatoi res. Nousreviendrons sur ce point parlasuite. Enattendant, nous devons stacker 
le nombre de deplacements aleatoi res dans une constante afin de pouvoir le changer faci I ement : 

// Etapes du melange aleatoire 
static const numShuffle:int = 200; 

Les pieces du puzzle glisseront avec fluidite en utilisant un Timer. Nous deciderons du nombre 
d' etapes et de la duree requise pour que le mouvement de glissement s'acheve : 

// Etapes et temps de 1' animation 
static const slideSteps:int = 10; 
static const slideTime: int = 250; 

LalargeuretlahauteurdespiecesdupuzzleserontcalculeesenfonctiondesconstantesnumPiecesHoriz 
et numPiecesvert et de la taille de I'image. Nous recupererons ces valeurs juste apres que I'image 
aura etechargee : 

// Taille des pieces 

private var pieceWidth: Number; 

private var pieceHeight:Number; 

II nousfaut un tableau pour stacker les pieces du puzzle. Nous y stockerons non pas simplement les 
references aux nouveaux sprites mais un petit objet contenant I 'emplacement de la piece du puzzle 
dans le puzzle fini ainsi que la reference au sprite : 

// Pieces du jeu 

private var puzzleObjects:Array; 

Nous aurons besoin d'un grand nombre de variables pour gerer le jeu et les mouvements. Pour 
commencer, nous avons biankPoint, un objet Point indiquant I'emplacement vide dans le puzzle. 
Lorsquelejoueur clique sur une piece qui lui est adjacente, Flash deplace la piece pour la loger dans 
I'espace vide. siidingPiece contient une reference a la piecequi se deplace. siideDirectionetleTimer 
siideAnimation permettront de parametrer cette animation : 

// Suivi des deplacements 
private var biankPoint: Point; 
private var slidingPiece:Object; 
private var slideDirection: Point; 
private var siideAnimation: Timer; 
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Lorsque le joueur clique sur le bouton Start, il est conduit a la seconde image, qui appelle 
startsiidingPuzzie. A la difference des fonctions constructeurs d'autres jeux, celle-ci ne fait pas 
grand-chose. C'estqu'en attendant que 1'image soit chargee il n'y pas grand-chose a faire. 

La variable biankPoint est positionnee au coin inferieur droit en utilisant certaines des constantes. 
Ensuite, loadBitmap est appelee avec le nom du fichier d'image : 

public function startSlidingPuzzle() { 

// L'espace vide se trouve en bas a droite 

biankPoint = new Point ( numPiecesHoriz-1 ,numPiecesVert-1 ) ; 

// Charger 1' image bitmap 
loadBitmap ( "slidingpuzzle. j pg " ) ; 

} 



Rappelez-vous que le decompte dans les tableaux et les boucles ActionScript commence a 
zero. La piece en haut a gauche correspond done a 0,0. La piece en bas a droite correspond 
done a un de moins que le nombre de pieces en largeur, soit numPiecesHoriz-1. Si un puzzle 
fait quatre pieces en largeur ettrois en hauteur, la piece en bas a droite correspondra done a 

3, 2, SOit numPiecesHoriz- 1 ,numPiecesVert- 1. 



Charger I'image 

La fonction loadBitmap est identique a cell e utilisee dans I'exemple precedent de ce chapitre : 

// Recuperer I'image bitmap a partir d'une source externe 
public function loadBitmap (bitmapFile: String) { 
var loader:Loader = new Loader(); 

loader. content LoaderInfo.addEventListener( Event .COMPLETE, loadingDone) ; 
var request :URLRequest = new URLRequest(bitmapFile) ; 
loader. load(request) ; 

} 

La fonction loadingDone prend dans le cas present une importance bien plus grande que 
dans I'exemple anterieur. Maintenant que I'image a ete chargee, il est possible d'obtenir la 
largeur et la hauteur, ce qui nous indique la largeur et la hauteur i ndi vi duel I es de chaque piece. 
Nous pouvons definir ces variables puis appeler makePuzziePieces pour operer le decoupage. 



Chapitre 6 



Puzzles d'images et puzzles coulissants 221 



Pour finir, shuffiePuzziePieces melange le puzzle et le prepare pour le joueur : 

// Chargement termine, proceder au decoupage 
public function loadingDone(event:Event) :void { 

// Creer une nouvelle image pour contenir 1' image bitmap chargee 

var image:Bitmap = Bitmap(event. target. loader. content) ; 

pieceWidth = image. width/numPiecesHoriz; 

pieceHeight = image. height/numPiecesVert; 

// Decoupage des pieces du puzzle 
makePuzzlePieces ( image . bitmapData) ; 

// Melange des pieces 
shufflePuzzlePieces( ) ; 

} 

Decouper I'image bitmap en morceaux 

Si notre precedent exempledecoupait I'image en differentes pieces, il n'avaitpasa construire tousles 
objets de donnees requis pour les rendre utiles dans un jeu. La fonction makePuzzlePieces se charge 
de cette tache en creant le tableau puzzieobj ects. U ne fois que le sprite de piece de puzzle est cree 
et quesa position est definie, la variable temporai re newPuzzieObject est creee. 

Trois proprietes sont associees a newPuzzieObject. La premiere est currentLoc, un objet Point qui 
indique ou la piece de puzzle se trouve actuellement. 0,0 designera ainsi I'emplacement en haut a 
gauche et 3,2, I'emplacement en basadroite. 

De maniere similaire, homeLoc contient aussi un Point. II s'agit toutefois de I'emplacement original 
(et final) pour la piece. II nechangera pas durant lejeu etfournit un point de reference afin que nous 
puissions determiner le moment ou chaque piece est retournee a son emplacement approprie. 



L'unedes autres approches possibles pourrait etre ici de stacker les proprietes currentLoc et 
homeLoc des sprites, puis de ne stacker que les sprites dans le tableau. Dans le premier cas, 

les trois Valeurs seraient puzzleObjects[x] .currentLoc, puzzleObjects[xl .homeLoc et 

puzzieobjectsix] .piece. Dans le dernier, les memes donnees seraient puzzieobjectsix] . 

currentLoc, puzzieobjectsix] .homeLoc et puzzleObjects[x] (sans le .piece Car I'element 

dans le tableau est le sprite). Pour ma part, je prefere creer mon propre tableau d'objets afin 
de m' assurer qu'ActlonScript peutrapi dement obtenir les Informations sans avoir a examiner 
I'objet sprite tout entier a chaque fois. 
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Nous avons egalement une propriete piece de newPuzzieObject. Cette propriete contient une reference 
au sprite de la piece. 

Nousstockeronstoutes les variables newPuzzieObject que nous creons dans le tableau puzzieObjects : 

// Decouper 1' image bitmap en pieces 
public function makePuzzlePieces(bitmapData:BitmapData) { 
puzzieObjects = new Array(); 
for(var x:uint=0;x<numPiecesHoriz;x++) { 
for (var y:uint=0;y<numPiecesVert;y++) { 
// Ignorer l'espace vide 

if (blankPoint. equals (new Point(x.y))) continue; 

// Creer 1' image bitmap et le sprite de la nouvelle piece de puzzle 

var newPuzzlePieceBitmap: Bitmap = new Bitmap (new BitmapData(pieceWidth, 
pieceHeight) ) ; 

newPuzzlePieceBitmap . bitmapData . copyPixels ( bitmapData , 

new Rectangle (x*pieceWidth,y*pieceHeight , 

pieceWidth, pieceHeight) ,new Point(0,0) ) ; 
var newPuzzlePiece: Sprite = new Sprite) ); 
newPuzzlePiece.addChild( newPuzzlePieceBitmap) ; 
addChild(newPuzzlePiece) ; 

// Definir 1' emplacement 

newPuzzlePiece. x = x* (pieceWidth+pieceSpace) + horizOffset; 
newPuzzlePiece. y = y* (pieceHeight+pieceSpace) + vertOffset; 

// Creer l'objet a stocker dans le tableau 
var newPuzzieObject: Object = new 0bject(); 
newPuzzieObject. currentLoc = new Point(x,y); 
newPuzzieObject. homeLoc = new Point(x,y); 
newPuzzieObject. piece = newPuzzlePiece; 

newPuzzlePiece. addEvent Listener (MouseEvent . CLICK, clickPuzzlePiece) ; 
puzzleObj ects . push ( newPuzzleOb j ect ) ; 

} 

} 

} 

Chaque piece de puzzle recupere son propre ecouteur evenementiel a I'ecoute des dies de souris, qui 

appelle clickPuzzlePiece. 
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A cestade, toutesles pieces sont en place, maisellesnesontpasmelangees. Si nous ne les melangions 
pasdu tout, lejeu commencerait avec le puzzle dispose commeil Testa la Figure 6.3. 



Figure 6.3 

Le puzzle coulissant non melange. 
La piece en bas a droite a ete 
supprimee afin de creer un espace 
dans lequel les autres pieces 
peuvent coulisser. 




Melanger les pieces 

U ne fois que les pieces du puzzle sont en place, il fautles melanger. L' idee est de creer un "puzzle en 
desordre" afin que le joueur puisse relever le defi de le redisposer correctement. 

L' un des moyens de creer ce desordre consi ste a placer toutes I es pi eces a des emplacements al eatoi res. 
Ce n'est cependant pas ainsi qu'il faut proceder. Si vous placez les pieces al eatoi rement, il est assez 
probable que vous vous retrouviez avec une disposition qui ne permettra jamais de replacer 
correctement les pieces. La Figure 6.4 presente un tel casde figure. 



Figure 6.4 

En inversant simplement les 
pieces 15 et 14, nous creons 
un puzzle impossible a resoudre. 
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Au lieu de placer aleatoirement chacune des pieces, nous commencerons done par I e puzzle termine et 
procederons a des deplacements aleatoires jusqu'a ce que la grille paraisse completement aleatoire. 

La fonction shuffiePuzziePieces opere une boucle et appelle shuffieRandom un certain nombre de 
fois. C'est ici shuffieRandom qui se charge du veritable travail : 

// Creer un certain nombre de deplacements aleatoires 
public function shuffiePuzziePieces () { 
for(var i:int=0;i<numShuffle;i++) { 
shuffleRandom( ) ; 

} 

} 

Pour creer un deplacement aleatoire, nous al Ions examiner toutes les pieces du puzzle. Ensuite, nous 
determinerons quels deplacements sont possibles et les placerons dans un tableau. Nous choisirons 
enfin un deplacement au hasard dans ce tableau et procederons a la modification correspondante. 

La cle du mecanisme sera la fonction vaiidMove, que nous al Ions examiner ensuite. La fonction 
shuffieRandom, apresavoirselectionneun deplacement aleatoire, appellemovePiece, lamemefonction 
que nous utilisons lorsque lejoueur clique pour operer un deplacement : 

// Deplacement aleatoire 

public function shuffleRandom( ) { 

// Parcours en boucle pour trouver les deplacements valides 
var validPuzzleObjects:Array = new Array(); 
for(var i:uint=0;i<puzzleObjects.length;i++) { 
if (validMove(puzzleObjects[i] ) != "none") { 
validPuzzleObjects.push(puzzleObjects[i] ) ; 

} 

} 

// Selection d'un deplacement aleatoire 

var pick:uint = Math. floor(Math. random( )*validPuzzleObjects. length) ; 
movePiece(validPuzzleObjects[pick] .false) ; 

} 

La fonction vaiidMove prend en parametre une referenced un puzzieObject. En utilisant la propriete 
currentLocdecette piece de puzzle, el I epeut determiner si I a piece setrouve a cote del' emplacement 
vide. 

Tout d'abord, el le regardeau-dessusdela piece de puzzle. Dans ce cas, les valeurs x de la piece etde 
I' emplacement vide doiventsecorrespondre. Si c'esteffectivementlecas, c'est au tour des positions 
verticales (y) d'etre comparees. biankPoint.y doit faire un de moins que currentLoc.y pour le 
puzzieObject. Si toutcela seconfirme, la valeur "up" estretournee, qui i ndique a la fonction appelant 
vaiidMove que cette piece possede effectivement un deplacement valide : "up" (vers le haut). 
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Vous remarquerez que la declaration de la foncti on vanmove stipule qu'elle retourne une 
chame. C'est le sens de la portion 11 .■ string" dans la premiere ligne du code qui suit. II est 
toujours judicieux d'indiquer le type de donnees retourne par vos fonctions. Vous aiderez 
ainsi le lecteur F lash a optimiser ses performances. 



Lesdeplacementsverslebas, la gaucheet la droitesontensuite examines. Si aucundecesdeplacements 
nenese revel evalide, lavaleur "none" estretournee, afin d'indiquerqu'il n'existepasdedeplacement 
valide pour cette piece du puzzle : 

public function validMove(puzzleObject : Object ) : String { 
// L' emplacement vide est-il au-dessus ? 
if ((puzzleObject.currentLoc.x == blankPoint.x) && 
(puzzleObject.currentLoc.y == blankPoint .y+1 ) ) { 
return "up"; 

} 

// L'emplacement vide est-il en dessous ? 

if ((puzzleObject.currentLoc.x == blankPoint.x) && 

(puzzleObject.currentLoc.y == blankPoint .y-1 ) ) { 

return "down"; 

} 

// L'emplacement vide est-il a gauche ? 

if ((puzzleObject.currentLoc.y == blankPoint. y) && 

(puzzleObject.currentLoc.x == blankPoint .x+1 ) ) { 

return "left"; 

} 

// L'emplacement vide est-il a droite ? 

if ((puzzleObject.currentLoc.y == blankPoint. y) && 

(puzzleObject.currentLoc.x == blankPoint .x-1 ) ) { 

return "right"; 

} 

// Aucun deplacement n'est valide 
return "none"; 

} 

Apres le melange, la partie commence avec toutes les pieces en desordre, comme le montre la 
Figure 6.5. 
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Figure 6.5 

Lejeu peutmaintenantcommencer 
avec les pieces melangees. 




La question de savoir combien de fois il faut melanger les pieces n'a pas de reponse defini- 
tive. J 'ai personnellement opte pour deux cents deplacements a I eatoi res, car cela semblait 
convenir. Si vous choisissez moins, la solution sera plus facile. Si vous choisissez un nombre 
de deplacements trop eleve, vous constaterez une pause au debut du jeu pendant I 'operation 
de melange. 




Reagir aux dies du joueur 

Lorsque le joueur clique, la fonction ciickPuzziePiece s' execute. L'evenement qui lui est passe 
possede un currentTarget qui correspond a une piece dans la liste puzzieobjects. Une boucle 
rapide permet de trouver la piece correspondante et la fonction movePiece est appelee : 

// L 1 utilisateur a clique sur une piece du puzzle 
public function clickPuzzlePiece(event:MouseEvent) { 
// Trouver la piece cliquee et la deplacer 
for(var i:int=0;i<puzzleObjects.length;i++) { 

if (puzzleObjects[i] .piece == event. currentTarget) { 
movePiece(puzzleObjects[i] ,true) ; 
break; 

} 

} 

} 
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Vous remarquerez que, lorsque la fonction shuffieRandom a appele movePiece, el I e a utilise false 
comme second parametre. Lorsque ciickPuzziePiece a appele movePiece, ellea en revanche utilise 
true comme second parametre. 

Le second parametre est siideEff ect, qui possede la valeur true ou la valeur false. Si la valeur est 
true, un objet Timer estcreeafin dedeplacer progressivement la piece en un court instant. Si la valeur 
est false, la piece se deplace immediatement. Nous souhaitions que les pieces se deplacent 
immediatementdanslecasdu melange mais, quand lejoueuresten pleine parti e, qu'il puisse profiter 
de cette animation. 

La decision n'est en fait pas real i see a I ' i nterieur de movePiece. movePiece se contente en real ite 
d'appeler vaiidwiove et de determiner si le deplacement se fait vers le haut, le bas, la gauche ou la 
droite. Ensuite, el I e appelle movePieceinDirection avec les memes valeurs puzzieobject et 
siideEff ect, ainsi que de nouvelles valeurs dx et dy en fonction de la direction du mouvement. 




La fonction movePiece utilise la structure switch d'ActionScript pour operer le branchement 
vers un bloc de code parmi quatre possibles. L' i nstructi on switch s'apparente a une serie 
d'instructions it...then mais ne requiert la variable testee que dans la ligne switch. Chaque 
branche demarre avec le mot-cle case et la valeur correspondant a ce cas. Chaque branche 
doit se terminer par une commande break. 



II Deplacement d'une piece dans l'espace vide 

public function movePiece(puzzleObject:Object, slideEffect: Boolean) { 
// Determiner le sens vers l'espace vide 
switch (validMove(puzzleObject) ) { 
case "up": 

movePieceInDirection(puzzleObject,0, -1 , slideEffect) ; 
break; 
case "down": 

movePieceinDirection (puzzleObj ect, 0, 1 , siideEff ect) ; 
break; 
case "left": 

movePieceInDirection(puzzleObject, -1 ,0, slideEffect) ; 
break; 
case "right": 

movePieceinDirection (puzzleObj ect , 1 ,0, siideEff ect) ; 
break; 

} 
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La fonction movePieceinDirection change instantanement la propriete currentLoc de la piece et la 
variable biankPoint. Ce mecanisme permet de gerer le cas ou le joueur realise un autre mouvement 
avantquel'animation nesoitterminee. La piece et le biankPoint setrouventainsi deja veritablement 
au bon emplacement. L'animation n'a des lors de vocation qu'esthetique : 

// Deplacer la piece dans l'espace vide 

public function movePieceInDirection(puzzleObject:Object, 

dx,dy:int, slideEffect:Boolean) { 

puzzleObject. currentLoc. x += dx; 

puzzleObject. currentLoc. y += dy; 

biankPoint. x -= dx; 

biankPoint. y -= dy; 

S'il doit y avoir une animation, la fonction startsiide est appelee pour la configurer. Sans eel a, la 
piece du puzzle est deplacee immediatement vers I enouvel emplacement: 

// Animer ou non 
if (slideEffect) { 

// Lancer animation 

startsiide (puzzleObject,dx*(pieceWidth+pieceSpace) , 
dy*(pieceHeight+pieceSpace) ) ; 
} else { 

// Aucune animation, deplacer seulement 

puzzleObject. piece. x = 
puzzleObject .currentLoc. x* (pieceWidth+pieceSpace) + horizOff set ; 

puzzleObject. piece. y = 
puzzleOb j ect . currentLoc . y* ( pieceHeight+pieceSpace) + vertOf f set ; 
} 



Animer le glissement 

Le glissement anime se realise en langant un objet Timer et en deplagant la piece du puzzle par 
etapes. Selon les constantes au debut de la classe, il doit y avoir dix etapes, espacees chacune de 
250 millisecondes. 

La fonction startsiide commence par configurer certaines variables afin de surveiller l'animation. 

La piece du puzzle a deplacer est slidingPiece. slideDirection est un objet Point dont dx et dy 

represented I e sens du deplacement. II s'agit de (1,0), (-1,0), (0,1) ou (0,-1) selon lesensdanslequel 
sedeplace la piece. 
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Ensuite, le Timer est cree et deux ecouteurs lui sont associes. L'ecouteur TimerEvent. timer deplace la 
piece tandis que I'ecouteur TimerEvent. timer_complete appelle siideDone pour realiser I' animation : 

// Configuration d'un glissement 

public function startSlide(puzzleObject:Object, dx, dy:Number) { 
if (slideAnimation != null) slideDone(null) ; 
slidingPiece = puzzleObject; 
slideDirection = new Point(dx,dy) ; 

slideAnimation = new Timer(slideTine/slideSteps,slideSteps) ; 
slideAnimation .addEvent Listener (TimerEvent .TIMER, slidePiece) ; 
slideAnimation .addEventListener (TimerEvent .TIMER_COMPLETE, siideDone) ; 
slideAnimation . start ( ) ; 

} 

Toutes les 250 mil lisecondes, la piece de puzzle se deplace d'une fraction de la distance afin de se 
rapprocher de sa destination finale. 

Vous remarquerez egalement que la premiere ligne de startsiide correspond a un appel potentiel a 
siideDone. Cet appel s'effectuesi unenouvelleanimation de glissement est sur I epointdecommencer 
alorsquela premiere n'a pasfini dese realiser. Danscecas, la precedente est rapidementtermineepar 
un unique appel a siideDone qui place la piece mouvante a son emplacement final et laisse done la 
place pour I'animation du nouveau glissement. 



II s'agit cette fois d'un type d'animation different de I'animation temporelle utillsee au 
Chapitre 5. Le mouvement de glissement anime n'est pas ici un element critique du jeu. II 
n'a de vertu qu'esthetique. II est done judicieux de le placer en dehors du reste de la 
logique du jeu, avec son propre minuteur temporaire. Nous n'avons pas a nous soucier de 
I'homogeneite des performances, car el les n'affectent pas le jeu. 




// Avancer d'une etape dans le glissement 
public function slidePiece(event:Event) { 

slidingPiece. piece. x += slideDirection. x/slideSteps; 

slidingPiece. piece. y += slideDirection. y/slideSteps; 

} 

Lorsque le Timer a termine, remplacement de la piece du puzzle est defini de maniere a s' assurer 
que la piece se trouve exactement ou el I e doit etre. Le minuteur slideAnimation est ensuite 
supprime. 
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C'est egalement le moment d'appeler puzziecompiete afin de voir si chaque piece se trouve au bon 
endroit. Si c'est le cas, nous appelons ciearPuzzie et le scenario principal passe a I'image gameover : 

// Fin du glissement 

public function slideDone( event: Event) { 

slidingPiece. piece. x = 
slidingPiece . currentLoc . x* ( pieceWidth+pieceSpace) + horizOf f set ; 

slidingPiece. piece. y = 
slidingPiece . currentLoc . y* ( pieceHeight+pieceSpace) + vertOf f set ; 

slideAnimat ion. stop ( ) ; 
slideAnimation = null; 

// Verifier si le puzzle est termine 
if (puzzleComplete( ) ) { 

clearPuzzle( ) ; 

gotoAndStop( "gameover" ) ; 

} 



Fin de partie et nettoyage 

II est tres facile de determiner si la partie est termi nee. II suffit pour cela d'examiner chaque piece et 
de comparer currentLoc avec nomeLoc. Grace a la fonction equals de la classe Point, cela peut se 
faire en uneetape. 

Si toutes les pieces se trouvent dans leur emplacement d'origine, la fonction renvoie la valeur true : 

// Verifier si toutes les pieces sont en place 
public function puzzleComplete( ) : Boolean { 

for(var i:int=0;i<puzzleObjects.length;i++) { 

if ( !puzzleObjects[i] . currentLoc. equals(puzzleObjects[i] .homeLoc) ) { 
return false; 

} 

} 

return true; 

} 



Vient ensuite la fonction de nettoyage du jeu. Tous les sprites de piece de puzzle se debarrassent de 
leurs evenements MouseEvent. click et sont supprimes, apres quoi le tableau puzzieObjects est 
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reinitialise a null. Comme les pieces du puzzle sont les seuls objets du jeu qui ont etecrees, il n'y a 
rien de plus a faire : 

// Supprimer toutes les pieces du puzzle 
public function clearPuzzle() { 

for (var i in puzzleObjects) { 
puzzleObjects [i] . piece. addEvent Listener (MouseEvent .CLICK, 
clickPuzzlePiece) ; 

renoveChild(puzzleObjects[i] .piece) ; 

} 

puzzleObjects = null; 

} 

Modifier le jeu 

Le jeu est plutot simple a jouer et peu de variantes sont susceptibles de I'ameliorer. Vous pouvez 
cependant ameliorer le programme lui-meme en offrant la possibility de selectionner I'image de 
manieredynamique. La page Web pourraitainsi passer elle-meme I e nom del' image. Etvouspourriez 
proposer un jeu qui utilise differentes images sel on la page Web ou selon lejour. 

Cejeu peutegalementetre rendu progressif. A pres que chaque puzzle est termine, un nouveau niveau 
peut etre propose. Le nom de fichier de I'image et les variables numPiecesHoriz et numPiecesvert 
peuventetre passes en parametresa startsiidingPuzzie.Au lieu d'acceder a I'image gameover une 
fois le puzzle termine, vous pourriez ainsi passer au niveau suivant avec un puzzle plus grand et plus 
difficile a recomposer. 



Puzzle classique 



Codes sources 

http://flashgameu.com 
A3GPU06 J igsawPuzzle.zip 



Les puzzles classiquesse sont popularises au xvm e siecle. A cetteepoque, on lesconstruisaiten bois 
eta I 'aided' une veritable scie(d'ou leur nom anglais, jigsaw puzzle ou puzzle-scie). A ujourd'hui, ces 
puzzles sont faits en carton avec une presse a decouper. Les puzzles modernes peuvent etre tres 
sophistiques. Certains atteignent jusqu'a 24 000 pieces. 

Les puzzles pour ordinateurse sont popularisessurleWebetdanslesjeuxdeCD deslafindesannees 
1990. Dans ce chapitre, nous al Ions creerun jeu de puzzle simple en uti I isantdes pieces rectangulaires 
decoupees dans une image importee. 
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Dans notrejeu de puzzle, nous allonsdecouper les pieces comme pour lejeu de puzzle coulissant. A u 
lieu de les placer dans des endroits particuliers a I'ecran, nous les disposerons cependant cettefois de 
maniere completement aleatoire. Lejoueur pourraalors faire librement glisser les pieces a I'ecran. 

La difficulty principale pour la programmation decejeu est d'amener les pieces a se "coller" lorsque 
lejoueur les positionne cote a cote. 



( ^ 



La plupart des jeux de puzzle prennent la peine de creer des pieces de puzzle qui possedent 
I'apparence des pieces tradltlonnel les du jeu en carton, avec des embouts entrecroises. Cette 
fonctionnal ite esthetlque peut etre rea I i see avec F lash mais unlquement en utilisant un cer- 
tain nombre d'outils de dessin vectori el et de manipulation d'images bitmap. Nous nous en 
tiendrons ici a des pieces rectangulaires afin de nous concentrer avanttoutsur le code. 



Configurer la classe 

L'animation du puzzle classique est tout a fait identique a eel le du puzzle coulissant. Elle contient 
trois images et la seconde appelle startJigsawPuzzie. Les memes instructions import sont en outre 
requises : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. net. URLRequest; 
import flash. geom.*; 
import flash. utils. Timer; 

Les variables numPiecesHoriz et numPiecesvert sont listees tout en haut de la classe. Ces constantes 
ont toutes les chances d'etre modifiees parce que vous pouvez faire varier le nombre de pieces d'un 
puzzle classique pour creer differents niveaux de difficulty N ousal Ions creer un puzzle de 8 x 6 pour 
cetexemple : 

public class JigsawPuzzle extends MovieClip { 
// Nombre de pieces 
const numPiecesHoriz :int = 8; 
const numPiecesVert:int = 6; 

La largeur et la hauteur des pieces seront decidees apres que I'image aura ete importee et que le 
programme aura pu en connaitre la taille : 

// Taille des pieces 
var pieceWidth:Nunber; 
var pieceHeight: Number; 
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Comme pour le puzzle coulissant, nous stockons toutes les pieces du puzzle sous forme d'objets dans 
le tableau puzzieobjects : 

// Pieces du jeu 

var puzzleObjects :Array; 

C'est ace point que le jeu de puzzle classique prend un autre chemin que celui du puzzle coulissant. 
Au lieu de placer les pieces du puzzle directementsur la scene, nous les pi aeons dans deux sprites. Le 
sprite seiectedPieces conti endra toutes les pieces de puzzle qui sont actuellement deplacees. Le 
sprite otherPieces conti endra tout le reste. 



La technique qui consiste a placer desgroupes d'objets d'affichagea I'interieur de sprites est 
un excellent moyen de regrouper des objets si mi I a i res. Comme vous le verrez dans la suite de 
cet exemple, vous pouvez utiliser addchud pour deplacer un objet d'affichage d'un sprite a 
un autre. 




// Deux niveaux de sprite 
var selectedPieces:Sprite; 
var otherPieces:Sprite; 

Lorsque lejoueur selectionne une piece a faire glisser, il se peutqu'il selectionneune unique piece ou 
un groupe de pieces reliees. A u lieu d'une unique variable pointant vers la piece deplacee, nous avons 
done besoin d'un tableau pour stacker uneou plusieurs pieces : 

// Pieces deplacees 

var beingDragged: Array = new Array(); 

La fonction constructeur du jeu, en plus d'appeler loadBitmap, cree les deux sprites dont nous avons 
besoi n et les ajoute a la scene. L ' ordre dans I equel ces spri tes sont aj outes est i mportant parce que nous 
souhaitons que le sprite seiectedPieces se trouve au-dessus du sprite otherPieces : 

// Chargement de 1' image et configuration des sprites 
public function startJigsawPuzzle( ) { 

// Chargement de 1' image bitmap 

loadBitmap ( " j igsawimage . j pg " ) ; 

// Configuration des deux sprites 
otherPieces = new Sprite(); 
seiectedPieces = new Sprite(); 
addChild(otherPieces) ; 

addChild(selectedPieces) ; // selected on top 

} 
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Chargement et decoupage de l'image 

L'image est chargee de la meme maniere que pour le puzzle coulissant. J e ne reviendrai ainsi pas sur 
la fonction loadBitmap parce qu'elle est identique a la precedente. 

Chargement de l'image bitmap 

La fonction loadingDone n'est pas si eloignee de I'ancienne non plus. U ne fois l'image importee et les 
valeurs piecewidth et pieceHeight calculees, nous appelons makePuzziePieces pour decouper l'image. 

II y a une difference importante concernant notre maniere de proceder ici avec les calculs de 
piecewidth et pieceHeight. La fonction Math. floor est utilisee avec une division par dix pour 
restreindreles nombresdela largeur et dela hauteur a des mul ti pi esde dix. Ainsi, si nouschoisissions 
sept pieces dans la largeur pour 400 pixels, nous aurions 57,14 pixels pour chaque piece. Nous 
utiliserons cependant une grille de 10 x 10 pour permettre aux joueurs de caler cote a cote les pieces 
plus aisement. En arrondissant eel a a 50, nous nous assurons que les largeurs et hauteurs s'aligneront 
sur une grille de 10 xlO. Nous reviendrons sur ce point lorsque nous construirons la fonction 
lockPieceToGrid par la suite. 

Pour finir, nous ajoutons deux ecouteurs evenementiels. Le premier est un evenement enter_frame 
pour le mouvement des pieces durant leur deplacement. Le second est un evenement mouse_up sur la 
scene. II sert a obtenir les evenements de relachement de souris qui signal ent la fin du deplacement. 

L'utilisateur clique sur une piece pour commencer a la faire glisser et I'evenement mouse_down agit 
sur la piece elle-meme. Pourtant, ensuite, lorsque le deplacement est termine, nous ne pouvons pas 
compter sur lefait que la souris setrouvetoujours sur la meme piece ni meme sur une piece quelconque. 
II est possible que le joueur deplace le curseur rapidement et que celui-ci se trouve legerement a 
I'ecart des pieces. Les evenements de souris sont reconduits vers la scene ; il est done plus sur de 
placer un ecouteur mousejjp sur la scene afin de s' assurer que nous en soyons notifies. 

// Fin du chargement de l'image bitmap, decoupage 
private function loadingDone(event:Event) :void { 

// Creer nouvelle image pour contenir les donnees bitmap chargees 

var image:Bitmap = Bitmap ( event . target. loader. content) ; 

piecewidth = Math. floor ( (image. width/numPiecesHoriz) /10) *10; 

pieceHeight = Math.floor((image.height/numPiecesVert)/10)*10; 

// Placer les donnees bitmap chargees dans l'image 
var bitmapData:BitmapData = image. bitmapData; 

// Decouper en pieces de puzzle 
makePuzzlePieces(bitmapData) ; 

// Configurer les evenements de mouvement et de relachement de souris 

addEventListener ( Event .ENTER_FRAME,movePieces) ; 

st age. addEvent Listener (MouseEvent .MOUSEJJP, liftMouseUp) ; 

} 
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Decouper les pieces du puzzle 

Le principe de base pour la decoupe des pieces est identique dans ce jeu. Nous n'aurons cependant 
pas besoin de definir d'emplacement pour les pieces parce qu'elles seront disposes de maniere 
aleatoire un peu plustard. 

U ne fois que les sprites sont crees, ils sont ajoutes a otherPieces, le sprite du dessous parmi les deux 
sprites que nous avons crees. 

Les elements puzzieobject sontaussi legerementdifferents. Au lieu decurrentLoc et homeLoc, nous 
n'aurons que ioc, un objet Point qui nous indique a quel endroit appartient la piece de puzzle dans le 
puzzle complet. 0,0 correspond parexemplea la piece superieure gauche. 

Nous avons aussi ajoute une propriete dragOffset aux pieces du puzzle. Nous I'utilisons pour 
positionner chaque piece a la distance appropriee du curseur pendant le deplacement : 

// Decouper 1' image bitmap en pieces 

private function nakePuzzlePieces(bitmapData:BitmapData) { 
puzzleObjects = new Array(); 
for(var x:uint=0;x<numPiecesHoriz;x++) { 
for (var y:uint=0;y<numPiecesVert;y++) { 

// Creer la nouvelle image bitmap de piece de puzzle et le sprite 

var newPuzzlePieceBitmap: Bitmap = new Bitmap(new BitmapData(pieceWidth, 

pieceHeight) ) ; 

newPuzzlePieceBitmap . bitmapData . copyPixels ( bitmapData, new Rectangle 
(x*pieceWidth,y*pieceHeight,pieceWidth, pieceHeight) ,new Point(0,0) ) ; 

var newPuzzlePiece: Sprite = new Sprite(); 

newPuzzlePiece.addChild( newPuzzlePieceBitmap) ; 

// Placer dans le sprite du bas 
otherPieces . addChild ( newPuzzlePiece ) ; 

// Creer des objets a stocker dans le tableau 
var newPuzzleObject : Object = new Object(); 
newPuzzleObject. loc = new Point(x,y); // location in puzzle 
newPuzzleObject. dragOffset = null; // offset from cursor 
newPuzzleObject. piece = newPuzzlePiece; 

newPuzzlePiece. addEvent Listener (MouseEvent .MOUSE_DOWN,clickPuzzlePiece) ; 
puzzleObjects .push (newPuzzleObject) ; 

} 

} 

// Rendre les emplacements des pieces aleatoires 
shufflePieces() ; 

} 
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La fonction shuffle selectionne des emplacements aleatoires pour toutes les pieces du puzzle. Nous 
ne nous preoccupons pas de savoir si les pieces se retrouvent les unes sur les autres ni comment el les 
sont reparties. Le but est que les pieces se retrouvent comme si el les etaient tombees de la boite. La 
Figure 6.6 presenteun exempledecette repartition aleatoire. 



Figure 6.6 

Les pieces du puzzle sont 
aleatoirement disposees a I'ecran. 




// Emplacements aleatoires pour les pieces 
public function shufflePieces( ) { 

// Selectionner x et y aleatoires 
for(var i in puzzleObjects) { 

puzzleObjects[i] .piece. x = Math. random ()*400+50; 
puzzleObjects[i] .piece. y = Math.random()*250+50; 

} 

// Verrouiller toutes les pieces sur une grille 10x10 
lockPiecesToGrid( ) ; 

} 

La derniere ligne de shuffiePieces appelle lockPieceToGrid. Cette fonction parcourt en boucle 
toutes les pieces du puzzle et les deplace vers I' emplacement le plus proche d'une grille de 10 x 10. 
Parexemple, si unepiecesetrouvea 43,87, elle est deplacee a 40,90. 

lockPieceToGrid est utiliseeparcequ'il s'agitd'un moyen simpledepermettreaujoueurderapprocher 
une piece d'une autre sans avoir a I'aligner au pixel pres pour que les pieces se "collent" I'une a 
I'autre. Normalement, si une piece setrouveneserait-cequ'a un pixel d'une autre, ellenes'y colle pas. 
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En plagant toutes les pieces sur une grille de 10 x 10, nous les amenonsa secoller parfaitement entre 
ellesdes qu'elles se trouvent a moinsdedix pixels les unes des autres. 

// Prendre toutes les pieces et les aligner sur la grille 10x10 
public function lockPiecesToGrid( ) { 
for(var i in puzzleObjects) { 
puzzleObjects[i] .piece. x = 
10*Math.round(puzzleObjects[i] . piece. x/10) ; 

puzzleObjects[i] .piece. y = 
10*Math.round(puzzleObjects[i] . piece. y/10) ; 
} 

} 

Comme nous utilisons des pieces de puzzle qui sont des multiples de dix en largeur et en 
hauteur, il est preferable d'utiliser une image source dont les dimensions sont elles-memes 
des multiples de dix. Une image de 400 x 300, par exemple, serait utilisee completement. 
Une image de 284 x 192 perdra en revanche une partie a droite et en bas pour pouvoir se 
limiter a des pieces dont les dimensions sont des multiples de dix. 




Faire glisser les pieces du puzzle 

Lorsqu'un joueur clique sur une piece du puzzle, plusieurs choses doivent se passer avant que la piece 
ne puisse sedeplacer avec lecurseur. La premiere consiste a determiner sur quelle piece I ' uti I isateur 
a clique. 

Trouver la piece sur laquelle le joueur a clique 

Cette operation s'effectue en parcourant en boucle les puzzleObjects jusqu'a trouver I'un d'entre 

eux dont la propriete piece correspond a event . currentTarget. 

Cette piece est ensuiteajouteea un tableau beingDragged vide. La valeur dragotfset de cette piece 
est en outre calculee en fonction de la distance entre I'emplacement du die et celui du sprite. 

Le sprite est deplace du sprite otnerPieces du dessous vers le sprite seiectedPieces du dessus. 
Un appel a addcniid suffit a cela. Des lors que le joueur fait glisser la piece du puzzle, celle-ci flotte 
au-dessus des autres, qui restent en dessous dans le sprite otnerPieces : 

public function clickPuzzlePiece(event :MouseEvent) { 
// Emplacement du clic 

var clickLoc: Point = new Point(event.stageX, event. stageY) ; 



beingDragged = new Array(); 
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// Trouver la piece sur laquelle l'utilisateur a clique 
for(var i in puzzleObjects) { 

if (puzzleObjects[i] .piece == event. currentTarget) { // this is it 

// Ajouter a la liste des pieces deplacees 

beingDragged.push(puzzleObjects[i] ) ; 

// Calculer le decalage du curseur 

puzzleObjects[i] .dragOff set = new Point (clickLoc.x - 

puzzleObjects[i] .piece. x, clickLoc.y - 

puzzleObjects[i] . piece. y) ; 

// Deplacer du sprite du dessous a celui du dessus 
selectedPieces.addChild(puzzleObjects[i] .piece) ; 
// Trouver les autres pieces collees a celle-ci 
findLockedPieces(i,clickLoc) ; 
break; 

} 

} 



Trouver les pieces liees 

Le plus interessant lorsque lejoueur clique sur une piece est I'appel a findLockedPieces. C'est que la 
piece sur laquelle lejoueur a clique n'est pas forcement isolee. Elle peut etre deja jointe a d'autres 
pieces du puzzle suite aux precedents deplacements. Toutes les pieces jointes a celle sur laquelle 
l'utilisateur a clique doivent egalement etre ajoutees a la liste beingDragged. 

Pour determiner si une piece est collee a une autre, il faut suivre une serie d'etapes. Ce processus 
commence en creant une liste ordonnee de toutes les pieces a I'exception de celle sur laquelle 
l'utilisateur a clique. Cette liste est triee en fonction de la distance par rapport a la piece cliquee. 

La commande sorton est un puissant outil pour trier des listes d'objets. A supposer que le 
tableau ne contienne que des objets si mi I a i res possedant chacun la meme propri ete de tri, vous 
pouvez rapidement et aisement trier la liste. Par exemple, le tableau /{a.- 4, b: 7}, {a.- 3, 

b:12), {a: 9, b: 17}] peut etre trie SUr a en Uti I isant Si mplement myArray. sortOn< "a" ) ;. 




Le code qui suit cree un tableau avec les proprietes dist et num pour chacun de ses elements. La 
premiere correspond a la distance entre la piece et celle sur laquelle l'utilisateur a clique. La seconde 
correspond au numero dela piece dans puzzleObjects : 

// Trouver les pieces qui doivent se deplacer ensemble 

public function findLockedPieces (clickedPiece:uint, clickLoc:Point) { 

// Obtenir la liste des objets puzzle triee par la distance a l'objet clique 

var sortedObjects:Array = new Array(); 
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for (var i in puzzleObjects) { 

if (i == clickedPiece) continue; 
sortedObjects.push( 

{dist: Point. distance(puzzleObjects[clickedPiece] .loc,puzzleObjects[i] .loc) , num: i}); 
} 

sortedObj ects . sortOn ( "dist 11 , Array . DESCENDING) ; 

M aintenant que nous avons un tableau de pieces trie, nous pouvons le parcourir en boucle et verifier 
chaque piece afin devoir si el I e est lieea la piece selectionnee. 

Pour commencer, nous verifions la position x et y de la piece. Nous souhaitons voir si la piece est 
correctement posi tionnee par rapport a la selection. Par exemple, si les pieces font 50 de large et 50 
de haut et si la piece originale se trouve a 170,240, la piece directement a gauche doit se trouver a 
120,240. La piece un cran plus loin a gauche doit etre a 70,240, et ainsi de suite. 

La Figure 6.7 presente quelques exemples de pieces qui se relient et ne se relient pas. 

A laFigure 6.7, 1'exempledu haut presente deux pieces proches I' une del' autre, maispassuffisamment 
pour se relier. L'exemple suivant presente des pieces parfaitement positionnees, mais entre lesquelles 
il manque une piece de liaison. La piece a gauche se trouve exactement a la bonne distance de eel le 
de droite, mais les pieces ne se relient pas parce qu'elles ne se trouvent pas cote a cote et que la piece 
qui doit les unir est manquante. 

Le troisieme exemple presente deux pieces reliees. E I les sont adjacentes et a distance parfaite. Le 
quatrieme est similaire, avec cettefois trois pieces reliees. 

Figure 6.7 

Les deux exemples du haut 
ne se relient pas, contrairement 
aux deux du bas. 




L a premi ere etape consi ste done a voi r si I a pi ece exami nee est correctement pi acee. L a seconde etape 
consiste a voir si el I e est reliee aux pieces trouvees j usque-la. Ce travail est delegue a la fonction 
isConnected, que nous allons examiner dans un instant. 
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Si la piece est effectivement reliee, nous pouvons I'ajouter a la liste beingDragged, positionner sa 

propriete dragOf f set et I'ajouter au sprite selectedPieces. 

Tout cela peut etre place dans une boucle do afin de pouvoir repeter le processus plusieursfois. II est 
possible d'avoi run ensemble de pieces I iees sous la forme d'un U et que I ' util isateur ait souhaite saisi r 
ce groupe par I' une des extremites du U . Cela signifierait que I'autre bout du U ne serait pas reconnu 
comme une piece liee. En revanche, si nousparcouronsen boucle les pieces non lieesa nouveau, leU 
sera trouve. Nous pouvons done definir une variable Boolean appelee oneLineFound et la positionner 
a true lorsque nous trouvons un lien. Si nous parcourons toutes les pieces non I iees sans trouver de 
lien, il faut en conclure que nous les avons toutes. Sans cela, nouscontinuons a effectuer la boucle : 

do { 

var oneLinkFound: Boolean = false; 

// Examiner chaque objet en commengant par le plus proche 
f or (i=sortedObjects. length -1 ;i>=0; i- - ) { 

var n:uint = sortedObjects[i] .num; // actual object number 

// Calculer la position relative a 1' objet clique 

var diffX:int = puzzleObjects[n] .loc.x - puzzleObjects[clickedPiece] .loc.x; 
var diffY:int = puzzleObjects[n] .loc.y - puzzleObjects[clickedPiece] .loc.y; 
// Voir si cet objet est correctement place 
// pour etre lie a celui clique 

if (puzzleObjects[n] .piece. x == 
(puzzleObjects[clickedPiece] .piece. x + pieceWidth*diffX) ) { 

if (puzzleObjects[n] .piece. y == (puzzleObjects[clickedPiece] .piece. y + 

pieceHeight*diffY)) { 
// Voir si cet objet est adjacent a un objet deja selectionne 
if (isConnected(puzzleObjects[n] ) ) { 

// Ajouter a la liste de selection et definir decalage 
beingDragged. push(puzzleObjects[n] ) ; 
puzzleObjects[n] .dragOffset = new Point(clickLoc.x - 

puzzleObjects[n] . piece. x, clickLoc.y- 
puzzleObjects[n] . piece. y) ; 
// Passer vers le sprite du haut 
selectedPieces. addChild(puzzleObjects[n] .piece) ; 
// Lien trouve, supprimer du tableau 
oneLinkFound = true; 
sorted0bjects.splice(i,1 ) ; 

} 

} 

} 

} 

} while (oneLinkFound); 

} 
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La de de la fonction isconnected tient au fait que nous avons deja trie la liste de pieces en fonction 
de leur distance vis-a-vis de la premiere. C 'est important, car nous devons progresser en nous ecartant 
de la piece de depart pour notre recherche de nouvelles pieces reliees. A mesure que nous examinons 
chaque nouvelle piece, les pieces entre la piece consideree et la piece de depart auront selon toute 
probabi lite deja ete examinees etajouteesau tableau beingDragged. Cela minimiselenombredefois 
ou nous aurons a parcourir le tableau des pieces. 

Parexemple, si I'utilisateur a cliquesur la piece 2, ©et que nous examinionsensuite 0,0, nous pouvons 
en deduire qu'elle n'est pas reliee parce que 1 ,0 ne fait pas partie de beingDragged. Ensuite, nous 
examinons 1 ,0 et constatons qu'elle est reliee, mais il est trap tard pour ajouter 0,0 car nous I'avons 
deja examinee. Nous devons done examiner 1 ,0 en premier parce qu'elle est plus proche, puis 0,0, 
qui est plus eloignee. 



Si vous pensez que ce processus est compl ique, considerez qu'il serait genera I ement effectue 
en utilisant un processus de calcul appele recursi vite. On parle de recursivite lorsqu'une 
fonction s'appelle elle-meme. C'est aussi un casse-tete pour bi en des debutants en informa- 
ti que. J 'ai done cree les methodes de ce chapitre afin d'eviter specifiquement la recursivite. 



Determiner si les pieces sont reliees 

La fonction isconnected recupere la difference entre la position horizontale et verticale de la piece 
examinee etde chaque piece deja dans beingDragged. Si el I e constate qu'elle setrouve a un cran de 
distance horizontalement ou verticalement (mais pas les deux a la fois), el I e est effectivement reliee : 

// Prend un objet et determine s'il est directement a cote de celui deja selectionne 
public function isConnected(newPuzzleObject:Object) :Boolean { 
for(var i in beingDragged) { 

var horizDist:int = Math.abs(newPuzzleObject.loc.x - beingDragged[i] .loc.x) ; 

var vertDist:int = Math.abs(newPuzzle0bject.loc.y - beingDragged[i] .loc.y) ; 

if ((horizDist == 1 ) && (vertDist == 0)) return true; 

if ((horizDist == 0) && (vertDist ==1)) return true; 

} 

return false; 

} 

Deplacer les pieces 

Noussavonsenfinquellespiecesdoiventetredeplacees. Ellessetrouventmaintenanttoutessoigneusement 
dans beingDragged, qui est utilise par movePieces dans chaque image pour les repositionner toutes : 

// Deplacer toutes les pieces selectionnees en fonction de 1 1 emplacement de la souris 
public function movePieces (event: Event) { 
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for (var i in beingDragged) { 

beingDragged[i] .piece. x = mouseX - beingDragged[i] .dragOffset.x; 
beingDragged[i] .piece. y = mouseY - beingDragged[i] .dragOffset.y; 



Terminer le mouvement 

Lorsque le joueur relache la souris, leglissements'interrompt. Nousdevonsdeplacer toutes les pieces 
du sprite selectedPieces vers le sprite otherPieces. Nousappelleronsaussi lockPiecesToGrid afin 
de nous assurer qu'elles peuvent etre mises en correspondance avec les pieces qui n'ont pas ete 
deplacees. 



Lorsque la fonction addcmid est utilisee pour ramener les pieces vers le sprite other- 



v-L pieces, les pieces sont replacees au-dessus de toutes les autres pieces a cet endroit. Ce 
principe fonctionne bien parce que nous flottons deja au-dessus. L'effet de superposition 
o est ainsi conserve. 



// La scene envoie evenement de relachement de souris, fin du deplacement 
public function liftMouseLlp(event:MouseEvent) { 

// Caler toutes les pieces sur la grille 

lockPiecesToGrid( ) ; 

// Ramener les pieces dans le sprite du dessous 
for(var i in beingDragged) { 

otherPieces. addChild(beingDragged[i] .piece) ; 

} 

// Nettoyer le tableau des pieces deplacees 
beingDragged = new Array(); 

// Voir si la partie est terminee 
if (puzzleTogether( ) ) { 

cleanUpJigsaw( ) ; 

gotoAndStop( "gameover" ) ; 

} 



} 



} 





} 
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Fin de partie 

Lorsque la souris est relachee, nous devons egalement verifier si la partie est termi nee. Pour cela, nous 
pouvons parcourir en boucle toutes les pieces du puzzle et comparer leurs positions avec celle de la 
premiere piece en haut a gauche. Si toutes se trouvent dans la position correcte par rapport a cette 
premiere, nous savons que le puzzle est termi ne : 

public function puzzleTogether() :Boolean { 

for(var i:uint=1 ;i<puzzleObjects.length;i++) { 

// Obtenir la position relative au premier objet 

var diffX:int = puzzleObjects[i] .loc.x - puzzleObjects[0] .loc.x; 

var diffY:int = puzzleObjects[i] .loc.y - puzzleObjects[0] .loc.y; 

// Voir si cet objet est correctement place 
// Pour etre relie au premier 

if (puzzleObjects[i] .piece. x != 

(puzzleObjects[0] .piece. x + pieceWidth*diffX) ) return false; 
if (puzzleObjects[i] .piece. y != 

(puzzleObjects[0] .piece. y + pieceHeight*diffY) ) return false; 

} 

return true; 

} 

La fonction de nettoyage obligatoire tire parti de notre systeme a deux sprites. Nous pouvons tout 
simplement les supprimer de la scene et positionner les variables qui les referencent a null. Nous 
devons aussi positionner puzzieob j ects et beginDragged a nun, ai nsi que suppri mer les evenements 

ENTER_FRAME et MOUSEJJP I 

public function cleanUpJigsaw( ) { 
removeChild(selectedPieces) ; 
removeChild(otherPieces) ; 
selectedPieces = null; 
otherPieces = null; 
puzzleObjects = null; 
beingDragged = null; 

removeEventListener ( Event .ENTER_FRAME,movePieces) ; 

stage. removeEvent Listener (MouseEvent .MOUSEJJP, liftMouseUp) ; 

} 
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Modifier le jeu 

Les developpeurs de jeu ont trouve de nombreux moyens de rendre les puzzles sur ordinateur plus 
interessants que leurs equivalents physiques. 

Si vous vous etes deja amuse a creer des filtres bitmap en ActionScript, I'occasion peut etre trouvee 
d'exploiter cette technique ici. L'ajout de neons, d'ombres portees ou de biseaux aux pieces peut 
reellement contribuer a leur donner de I' allure. 

Vous pouvez egalement ajouter une rotation des pieces afin de compliquer le puzzle. Les pieces 
peuvent etre pivotees de 90, 180 ou 270 degres et doivent etre ramenees a 0 pour creer le puzzle. Vous 
devez evidemment permettreau joueur defaire pivoter les pieces apres les avoir reliees, ce qui requiert 
du codeassez complexe pour pouvoir faire pivoter en bloc les pieces collees les unes aux autres. Ne 
vousrisquezdansunetelleaventurequesi vousavezattei ntlegradedeceinturenoireen programmation 
ActionScri pt. 



Direction et mouvement 
asteroides 

Au sommaire de ce chapitre : 

• U tiliser M ath pour faire pi voter et deplacer des objets 

• Air Raid II 

• Space Rocks 
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Les jeux presentes au C hapitre 5 faisaient appel a un mouvement horizontal et vertical simple. Le 
emplacement I e long del' axe horizontal ou vertical est tres facile a programmer. M alheureusement, les 
jeux d'arcade se revel ent plus exigeants. 

Un grand nombre de jeux requierent que vous donniez la possibilite au joueur de tourner et de se 
deplacer. Par exemple, les jeux de conduite proposent a la fois un mouvement de volant et un 
mouvement vers I'avant. Les jeux dans I'espace le requierent egalement et peuvent meme permettre 
au j oueur de ti rer des proj ecti I es dans I a di recti on ou poi nte I e vai sseau . 



Utiliser Math pour faire pivoter et deplacer des objets 



Codes sources 
(|[|)T^c http://flashgameu.com 

A3GPU07_RotationMath.zip 



La combinaison de la rotation et du mouvement requiert des calculs plus complexes que les simples 
operations d'addition, de soustraction, de multiplication et de division. II faut utiliser des fonctions 
trigonometriques fondamentales comme le sinus, le cosinus et I'arctangente. 

Si vous n'etes pas fort en mathematiques, n'ayez crainte : ActionScript va prendre en charge I'essenti el 
du boulot. 



Les fonctions Sin et Cos 

A u C hapitre 5, nous avons utilise des variables comme dx et dy pour definir la difference des positions 
horizontaleset vertical es. U n objetdont la variable dx valait 5 et la variable dy valait 0 sedeplacait de 
5 pixels vers la droite et de 0 vers le haut ou le bas. 

Comment en revanche determiner les valeursdedx etdy si nous neconnaissons que I'anglede rotation 
d'un objet ? Supposons que le joueur ait la possibilite de faire tourner un objet, comme une voiture, 
dans n'importe quelle direction. II fait pointer sa voiture legerement vers le bas et la droite. Ensuite, 
il avance. Vous devez dans ce cas modifier les propri etes x et y de la voiture, mais vous ne connaissez 
que Tangle de rotation de la voiture. 



La propri ete rotation de n'importe quel objet d'affichage correspond a un nombre compris 
entre -180 et 180, e'est-a-dire au nombre de degres de I'objet par rapport a son degre de 
rotation 0 d'origine. Vous pouvez modifier la rotation exactement comme les valeurs d'em- 
placement x ety. La rotation peut aussi etre plus precise, par exemple en specifia nt un angle 
de 23,76 degres. SI vous souhaltez tourner lentement, vous pouvez done ajouter 0,01 a cette 
propri ete a chaque image ou a chaque periode temporelle. 
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C'est ici qu'entrent en jeu les fonctions Math. cos et Math. sin. Elles permettent de calculer dx et dy 
en n'utilisant qu'un angle. 

La Figure 7.1 presente la logique mathemati que de Math, cos et Math. sin. II s'agit d'un graphiquede 
cercle. Math, cos et Math, sin nous permettent detrouver n'importe quel point sur lecercleen fonction 
d'un angle donne. 



Figure 7.1 

Ce graphique d'un cercle 
montre la relation entre 
un angle et I 'emplacement 
xety d'un point sur le cercle. 
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Si Tangle en question est 0, Math .cos et Math. sin retournent respectivement 1.0 et 0.0. Nous 
obtenons ainsi le point numero 1, dont la valeur de x est 1 .0 et la valeur de y est 0.0. Un objet ayant 
pivote de 0 degre se deplace done du centre du cercle vers le point 1. 

Si T objet pointea 90 degres, Math, cos et Math, sin retournent respectivement 0.0 et 1 .0. II s'agit du 
point numero 2. Un objet pivote de 90 degres se deplace done droit vers le bas. 

Vous pouvez voir de la meme maniere ou conduisent les angles de 180 et 270 degres : le premier tout 
droit a gauche et le second directement vers le haut. 



La Figure 7.1 presente les radians sous forme de multiples de pi, les radians bruts et les 
degres. Les radians et les degres sont deux moyens differents de mesurer les angles. U n cercle 
complet fait 360 degres, ce qui correspond a 2 x pi radians. Pi vautapproximativement 3,14, 
de sorte que 360 degres = 6,26 radians. 
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A ctionScri pt uti I ise a la f oi s des degres et des radians. Lesdegressont utilises par la propriete rotation 
des objets. Les radians sont utilises par les fonctions mathematiques comme Math. cos et Math. sin. 
Nous effectuerons done constamment la conversion d'une unite de mesure vers I' autre. 
Ces quatre directions sont faciles a determiner sans utiliser Math. cos et Math. sin. C'est cependant 
pour les angles intermediai res que nous dependons veritablement de ces fonctions trigonometriques. 

Lecinquieme point setrouvea un angled'environ 57 degres. On peut diffici lement se passer cettefois 
de Math, cos et Math, sin pour determiner a quel emplacement du cercle il correspond. Le resultat est 
0.54 dans la direction x et 0.84 dans la direction y. Si un objet devait se deplacer d'un pixel vers 
I'avant tout en pointant a 57 degres, nous nous retrouverions done au niveau du point 5. 



II est important de comprendre que ces 5 points (comme tous les autres points sur I e cercle) se 
> trouvent a une distance exactement identique du centre. Le probleme pour atteindre ces points 
concerne done non pas la vitesse de I'objet mais la direction empruntee. 
L' autre point important a retenir est que Math, cos et Math, sin retournenttoujours des valeurs 
comprises entre-1,0 et 1,0. Elles partentdu pri nci pe que I e cercle fait 1,0 unite en rayon. Ainsi, 
si un objet se trouve a 57 degres et se deplace de 1,0 unite, il atteinta.54, 0.84. Si sa vitesse est 
5, nous multiplions en revanche ce resultat par 5 et obtenons 2. 70, 4.20. 



Utiliser Cos et Sin pour piloter une voiture 

Considerons un exemple simple pour expliquer I' utilisation de ces fonctions trigonometriques. Les 
ani mations M ovingC ar.fla et M ovingC ar.as proposent un j eu de si mul ation de conduite elemental re. 
U ne voiture est placee au milieu de I'ecran et le joueur peut utiliser les touches flechees de gauche et 
de droite pour tourner ainsi que la touche flechee du haut pour avancer. La Figure 7.2 presente la 
voiture a I'ecran. 



Figure 7.2 

Cet exemple simple de simulation 
de conduite permet au joueur de 
tourner etd'avancer. 



MovingCar.swf 
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Nous utiliserons du code analogue a celui du jeu Air Raid du Chapitre 5, Nous ferons appel a trois 
variables booleennes, leftArrow, rightArrow et upArrow. Toutes ces variables seront posi tionnees a 
true lorsque lejoueur appuiera sur la touchecorrespondanteet a false lorsqu'il la relachera. 

Utiliser Math pour faire pivoter et deplacer des objets 

Voi ci I e debut de la classe, avec I es ecouteurs et I e code qui gere les touches flechees. Vous remarquerez 
que nous n'avons besoin d'aucune instruction import supplemental res pour utiliser les fonctions Math. 
Celles-ci font partie de la bi bl iotheque A ctionScript standard : 

package { 

import flash. display.*; 
import flash. events.*; 

public class MovingCar extends MovieClip { 

private var leftArrow, rightArrow, upArrow: Boolean; 

public function MovingCar() { 

// Deplacer a chaque image 
addEventListener(Event . ENTER_FRAME, moveCar) ; 

// Reagir aux evenements de touche 

stage . addEventListener ( KeyboardEvent . KEY_D0WN , keyPressedDown ) ; 
stage . addEventListener (KeyboardEvent . KEYJJP, keyPressedUp) ; 

} 

// Positionner les variables de touche a true 
public function keyPressedDown(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if ( event. keyCode == 39) { 

rightArrow = true; 
} else if (event . keyCode == 38) { 
upArrow = true; 

} 

} 
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// Positionner les variables de touche a false 
public function keyPressedUp(event:KeyboardEvent) { 
if ( event. keyCode == 37) { 

leftArrow = false; 
} else if ( event. keyCode == 39) { 

rightArrow = false; 
} else if (event. keyCode == 38) { 
upArrow = false; 

} 

} 

La fonction moveCar est appelee a chaque image. Elle examine chacune des valeurs booleennes et 
determine si I'une d'entre el les vaut true. Dans le cas des touches flechees de gauche et de droite, la 
propriete rotation du clip car est modifies et la voiture est pivotee. 




Vous remarquerez que nous n'utilisons pas une animation temporelle cette fois.Vous influerez 
done sur la vitesse de rotation et de deplacement si vous modifiez la cadence d'images de 
I'animation. 



Si la touche flecheedu haut est enfoncee, nous appelons la fonction moveForward : 

// Tourner ou avancer la voiture 
public function moveCar(event:Event) { 
if (leftArrow) { 

car. rotation -= 5; 

} 

if (rightArrow) { 

car. rotation += 5; 

} 

if (upArrow) { 
moveForward () ; 

} 

} 

Voila ou nous utilisons nos calculs mathematiques. Si la touche flechee du haut est enfoncee, nous 
calculons d'abord Tangle en radians de la voiture. Nous connaissons la rotation de la voiture, mais elle 
s'exprimeen degres. Pour convertir les degres en radians, nous divisons notre resultat par 360 (le nombre 
de degres dans un cercle) puis multiplions deux fois par pi (le nombre de radians dans un cercle). 
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Nous uti I iserons souvent cette conversion. II vautdonc la peine de la decomposer pour plus de clarte : 

1. Diviser par 360 pour convertir la valeur comprise entre 0 et 360 en une valeur comprise 
entre 0 et 1,0. 

2. M ultiplier par 2 x pi pour convertir la valeur comprise entre 0 et 1,0 en une valeur comprise 
entre 0 et 6,28. 

radians = 2 * pi * (degrees / 360) 

A I'inverse, lorsque nous souhaitonseffectuer la conversion des radians en degres, nous procedonsde 
la maniere suivante : 

1. Diviser par 2 xpi pour convertir la valeur comprise entre 0 et 6,28 en une valeur comprise 
entre 0 et 1,0. 

2. M ultiplier par 360 pour convertir la valeur comprise entre 0 et 1,0 en une valeur comprise 
entre 0 et 360. 

degrees = 360 * radians / (2 * pi) 



Comme les degres et les radians mesurent des angles, les valeurs se repetent elles-memes 
tous les 360 degres ou 2 x pi radians. Ainsi, 0 degre equivaut a 360 degres, de meme que 90 
et 450. II en va de meme avec les valeurs negatives. Par exemple, 270 degres equivalent a -90 
degres. En fait, la propriete rotation de n'importe quel objet retourne toujours une valeur 
comprise entre -180 et 180, qui equivaut a pi et-pi radians. 



Maintenant que nous avons Tangle en radians, nous le fournissons a Math. cos et Math. sin pour 
obtenir les valeurs dx et dy pour le mouvement. Nous multiplions en outre le tout par speed, une 
valeur que nous avons definie precedemment dans la fonction. Cette action deplace la voiture de 
5 pixels par image au lieu de 1 pixel par image. 

Pour finir, nous changeons les proprietes x et y de la voiture afin de la deplacer reellement : 

// Claculer vitesse x et y et deplacer la voiture 
public function noveForward( ) { 
var speed:Nunber = 5.0; 

var angle:Nunber = 2*Math. PI*(car. rotation/360) ; 
var dx:Number = speed*Math.cos(angle) ; 
var dy:Number = speed*Math.sin(angle) ; 
car.x += dx; 
car.y += dy; 

} 

} 

} 




252 ActionScript 3.0 pour les jeux 



Jouez avec I' animation MovingCar.fla. Faites tourner la voiture a differents angles et appuyez sur la 
toucheflechee du haut pour la voir avancer. Representez-vous les fonctions Math . cos et Math . sin qui 
traduisent Tangle en une quantite horizontale et verticale de mouvement. 

Ensuite, amusez-vous. Appuyez sur les touches flechees de gauche et du haut en meme temps pour 
faire tourner la voiture en cercle. Cela revient a tourner le volant devotre voiture en meme temps que 
vous accelerez. La voiture continue a tourner. 

Si I'on oublie I 'acceleration un instant, on obtient une amusante petite simulation de conduite. Au 
Chapitre 12, nouscreerons une veritable simulation de conduite complexeau cceurduquel mecanisme 
figureront toujours ces operations avec Math . cos et Math . sin. 

Calculer un angle a partir d'un emplacement 

Si Math. sin et Math. cos vous permettent d'obtenir les coordonnees x et y d'un angle, nous devrons 
aussi occasionnellement obtenir un angle a partir d'un ensemble de coordonnees x et y. Pour cela, 
nous devons utiliser un calcul d'arctangente. La fonction ActionScript pour cela est Math.atan2. 

La Figure 7.3 montre comment la fonction arctangent fonctionne. Le Point 1 est situe a 6,5 sur la 
grille. Pour trouver son angle, nous prenons la distance y et la distance x et les fournissons a Math. 
atan2. Le resultat sera 0,69 radian, soit environ 40 degres. 



Figure 7.3 

Les angles de ces deux points 
peuventetre determines en 
Utilisant Math. atan2. 
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Le second point se trouve a -9,-3. En fournissant ces valeurs a Math.atan2, nous obtenons -2,82 
radians, soit -162 degres (qui equivaut a 198 degres). La fonction Math.atan2 produit un resultat 
toujours compris entre - 180 et 180. 



II existe aussi une fonction Math.atan. Elle prend un parametre : le rapport entre la distance y 
et la distance x. Vous I'utiliseriez done de la maniere suivante : Matn.atan(dyidx). II s'agit de 
la fonction mathematique arctangente classique. Le probleme est que vous ne savez pas si le 
resultat est en avangant ou en reculant. Par exemple, -5/3 equivaut a 5/-3. L'un correspond a 
121 degres, I'autre, a -60 degres. La fonction Math.atan retourne-60 degres dans lesdeux cas. 
La fonction Matrt.atan2fournit a la difference Tangle approprie. 




Creons un exemple simple en utilisant une fleche. Vous le trouverez dans les fichiers source 
PointingArrow.fla et PointingArrow.as. 

La fleche est situee au centre de I'ecran (emplacement 275,200). Examinez la Figure 7.4. Vous 
remarquerez que le point d'alignement du clip se trouve au centre de la fleche. Lorsque vous faites 
pi voter un clip, i I tourneautourdece point. Vous remarquerez en outre que la fleche pointedirectement 
vers la droite. U ne rotation de 0 correspond a cette di rection. Tout objet cree dans le seul but de pivoter 
doit done etre cree en etant ainsi tourne vers la droite. 



Figure 7.4 

II est plus simple defaire 
pivoter des objets tournes 
vers la droite, avec le centre du 
clip au centre de la rotation. 
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Cette fleche pointe "vers" le curseur. Nous avons done un point d'origine pour la fleche a 275,200 et 
un point de destination del'emplacementdu curseur. Commeil est facile dedeplacerle curseur etde 
changer mousex et mouseY, il s'agit d'un moyen rapide d' experimenter Math.atan2. 

La classe concise suivante provenant de PointingArrow.as appelle une fonction a chaque image. 
Cette fonction calcule les valeurs dx et dy a partir des distances entre le curseur et Tempi acement de 
la fleche. E lie utilise ensuite Matn.atan2 pour calculer Tangle en radians. Elle le convertit en degres 
et attribue le resultat a la propriete rotation de la fleche : 

package { 

import flash. display.*; 

import flash. events.*; 

public class PointingArrow extends MovieClip { 

public function PointingArrow( ) { 

addEventListener ( Event . ENTER_FRAME , pointAtCursor) ; 

} 

public function pointAtCursor (event: Event) { 

// Recuperer 1' emplacement relatif de la souris 
var dx:Number = mouseX - pointer. x; 
var dy:Number = mouseY - pointer. y; 

// Determiner Tangle, le convertir en degres 

var cursorAngle: Number = Math.atan2(dy,dx) ; 

var cursorDegrees:Number = 360*(cursorAngle/(2*Math.PI)); 

// Pointer vers le curseur 
pointer. rotation = cursorDegrees; 

} 

} 

} 

Lorsquevousexecutez cette animation, I a fl eche pointe a tout moment vers I e curseur (voir Figure 7.5). 
A tout le moi ns, mousex et mouseY se mettent a jour, ce qui ne se produit que lorsque le curseur survole 
I'animation Flash. 

M aintenant que vous savez comment utiliser la trigonometrie pour observer et controler les positions 
et le mouvement des objets, nous pouvons les appliquer a des jeux. 
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F igure 7.5 

La fleche pointe vers le curseur 
lorsque eel ui-ci survole 
I'animation. 



| Pointing Arrow.swf 



Fichier Affichage Controle Deboguer 



Combines I 'un a I 'autre, cesdeuxexemples simples peuventproduired'interessants resultats. Par 
exemple, que se passe-t-il si la voiture devait etre guidee par la position de la souris vis-a-vis de 
la voiture? Elle pointerait vers la souris et lorsque vous vous deplaceriez, s'avancerait vers la 
souris a tout moment. Autrement dit, elle pourchasserait la souris. Que se passerait-il done si le 
joueur devait piloter une voiture commedans le premier exemple etqu'une seconde voiture poin- 
tait vers la souris et avangait par elle-meme ? La seconde voiture viendrait pourchasser la pre- 
miere ! Le site http://flashgameu.com en propose un exemple. 



Air Raid II 



Codes sources 

)t><- http://flashgameu.com 
A3GPU07_AirRaid2.zip 



Dans lejeu Air Raid du Chapitre 5, vous deplaciez un canon dans un sens et dans I'autre en utilisant 
les touches flechees. Ce mouvement vous permettait de cibler differentes parties du ciel alors que vous 
ti riez vers le haut. 

Grace a Math, sin et Math, cos, nous pouvons maintenant modifier cejeu de manierea immobiliser le 
canon tout en lui permettant de modifier son angle pour atteindre differentes cibles. 
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Modifier le canon 

La premiere chose a faire est de modifier I e clip AAGun afin d' avoir des canons pivotants. Nous allons 
separer completement du clip la base de la tourelle et la placer dans son propre clip, AAGunBase. Les 
canons resteront dans AAGun, mais nous les recentrerons afin que le point de pivot se trouve au centre 
et que les canons pointent vers la droite (voir Figure 7.6). 



Figure 7.6 

Les canons doivent 
pointer vers la droite 
pour correspondre aux 
valeurs cos et sin. 



AirRaid2.fla' [_ 
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_ Scene 1 3 AAGun 



Espace de Irani' *. 




BP 



L'idee est de modifier le moins possible le jeu Air Raid d'origine. Nous allons prendre les memes 
valeurs pour les appuis sur les touches flechees et les utiliser pour modifier la propriete rotation de 
AAGun, au lieu de la valeur y. 

Vous pourriez aussi utiliser un autre jeu de touches pour definir la rotation (par exemple, A 
etS ou la touche Comma nde et le point). Ensuite, utilisez les touches flechees pour deplacer 
lecanon : vousaurezalorsunearmequi se deplace I ateral ement et dont les canons peuvent 
pivoter. 




Nous definissons encore les valeurs x et y de la mitrai 1 1 ette, mais egalement la valeur rotation en la 
fixant a -90. C ette valeur de -90 signifie que la mi trail I ette commence en pointant vers le haut. Nous 
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restreindrons la valeur de la rotation tout comme nous avons restreint le mouvement horizontal dans 
la premiere version du jeu Air Raid. Cettefois, les valeurs seront comprises entre -170 et-20 degres, 
ce qui correspond a un angle de 50 degres vers la gauche ou la droite de la verticale. 

Voici done notre nouveau code AAG un.as. Recherchez les lignes dans lecodesuivant qui impliquent 
la variable newRotation et la propriete rotation : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 

public class AAGun extends MovieClip { 
static const speed: Number = 150.0; 
private var lastTime:int; // Temps de 1' animation 

public function AAGun () { 

// Emplacement initial de la mitraillette 

this.x = 275; 

this.y = 340; 

this. rotation = -90; 

// Mouvement 

addEventListener(Event . ENTER_FRAME , moveGun ) ; 

} 

public function noveGun(event:Event) { 
// Calculer le temps ecoule 
var timePassed:int = getTiner( ) -lastTime; 
lastTime += timePassed; 

// Position actuelle 

var newRotation = this. rotation; 

// Pivoter a gauche 

if (MovieClip(parent) .leftArrow) { 

newRotation -= speed*timePassed/1000; 

} 

/ / Pivoter a droite 

if (MovieClip(parent) . rightArrow) { 

newRotation += speed*timePassed/1000; 

} 
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// Verifier les limites 

if (newRotation < -170) newRotation = -170; 
if (newRotation > -20) newRotation = -20; 

// Repositionner 

this. rotation = newRotation; 

} 

// Supprimer de l'ecran et supprimer les evenements 
public function deleteGun() { 
parent. removeChild (this) ; 

renoveEventListener (Event . ENTER_FRAME , noveGun ) ; 

} 

} 

} 

Vous remarquerez que la valeur speed fixee a 150 reste la meme. II serait normal ement fort probable 
que le passage du mouvement horizontal au mouvement de rotation requierre une adaptation de la 
valeur de vitesse mais, dans le cas present, la valeur de 150 fonctionne dans les deux cas. 



Changer les balles 

La classe Bullets.as doit changer pour que les balles se deplacent vers le haut en suivant un angle au 
lieu d'etre parfaitement vertical es. 

Le graphisme doit changer egal ement. Les balles doivent pointer vers la droite et etre centrees sur le 
point d'alignement. La Figure 7.7 presente le nouveau clip Bullet. 

La classe doit changer afin d'ajouter les variables de mouvement dx et dy. Ces variables seront 
calculees a parti r de I 'angle auquel la balle a ete tiree, qui est un nouveau parametre passe dans la 
fonction Bullet. 

En outre, la balle doit commencer a une certaine distance du centre de la mitrail lette ; dans le cas 
present, el I e doit etre a 40 pixels du centre. Les valeurs Math, cos et Math, sin sont toutes deux 
uti I i sees pour calculer la position d'originede la balle et calculer les valeurs dx et dy. 

En outre, la rotation du clip Bullet sera definie pour correspondre a la rotation de la mitrai 1 1 ette. Les 
balles commenceront done juste au-dessus de la fin du canon, en pointant vers I'exterieur du canon, 
et continueront de se deplacer en s'eloignant avec le meme angle : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. utils.getTimer; 
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Figure 7.7 

Le nouveau clip Bullet recentre 
le graphisme et le fait pointer 
vers la droite. 
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public class Bullet extends MovieClip { 
private var dx,dy:Nunber; // Vitesse 
private var lastTime:int; 

public function Bullet(x,y:Number, rot: Number, speed: Number) { 
// Definir position de depart 
var initialMove: Number = 35.0; 

this.x = x + initialMove*Math.cos(2*Math.PI*rot/360) ; 
this.y = y + initialMove*Math.sin(2*Math.PI*rot/360) ; 
this. rotation = rot; 

// Obtenir la vitesse 

dx = speed*Math.cos(2*Math.PI*rot/360) ; 

dy = speed*Math.sin(2*Math.PI*rot/360) ; 

// Configurer 1' animation 
lastTime = getTimer(); 

addEvent Listener ( Event . ENTER_FRAME,moveBullet) ; 
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} 

public function moveBullet(event:Event) { 
// Calculer le temps ecoule 
var timePassed:int = getTimer( ) -lastTime; 
lastTime += timePassed; 

// Deplacer la balle 

this.x += dx*timePassed/1000; 

this.y += dy*timePassed/1000; 

// La balle a depasse le haut de l'ecran 
if (this.y < 0) { 
deleteBullet() ; 

} 

} 

// Supprimer la balle de la scene et de la liste 
public function deleteBullet( ) { 

MovieClip(parent) .removeBullet(this) ; 

parent. renoveChild (this) ; 

renoveEventListener ( Event .ENTER_FRAME,moveBullet) ; 

} 

} 

} 

Changements apportes a AirRaid2.as 

Deschangementsdoiventetreapportesa la classe principaleafin des' adapter aux nouvelles versions 
deAAGun et Bullet. Consideronschaquechangement. Nousallonscreerunenouvelleclasseappelee 
AirRaid2.as et changer la classe du document de I'animation afin de pointer sur cette classe. 
N'oubliez pas aussi de changer la definition de classe en haut du code en remplacant AirRaid par 

AirRaid2. 

Dans les definitions de variable de la classe, nousdevonsajouter lenouveau clip MGunBase ainsi que 
conserver leclip MGun : 

private var aagun:AAGun; 
private var aagunbase:AAGunBase; 
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Dans startAirRaid, nous devons tenir compte du fait que la mitrai llette est maintenant representee 
par deux clips. AAGunBase nepossede pas declasse a soi : nous devons fai re correspondresa position 
avec celledeAAGun. 



Vous pouvez aussi supprimer complement AAGunBase en utilisant un graphisme different ou 
caler les canons sur un graphisme qui fait partie del' a rriere- plan. 

// Creer la mitraillette 
aagun = new AAGun( ) ; 
addChild(aagun) ; 
aagunbase = new AAGunBase(); 
addChild(aagunbase) ; 
aagunbase. x = aagun. x; 
aagunbase. y = aagun. y; 

Le seul autre changement necessaire doit etre opere dans la fonction fireBuiiet. Cette fonction doit 
passer la rotation dela mitrai llette a la classeBuiiet, afin qu'elle connaisse la direction dans laquelle 
tirer la balle. Nous ajouterons done ce troisieme parametre de maniere a le faire correspondre au 
troisieme parametre dans la fonction Bullet qui cree une nouvelle balle : 

var b:Bullet = new Bullet(aagun.x, aagun. y, aagun. rotation, 300) ; 



Si nous creions ce jeu de toutes pieces, nous pourrions meme ne pas inclure les deux premiers 
parametres qui se referent a la position dela mitraillette. Puisquecelle-ci ne se deplace plus, 
el I e restera en effet a la meme position. Comme nous avions dej a du code qui s'occupait de 
relier le point de depart de la balle a la position de la mitraillette, nous pouvons leconserver 
ici et tirer parti du fait qu'un seul emplacement dans le code sert a determiner la position de 
la mitraillette. 



Noussommes parvenus a changer la classe AirRaid2.as. En fait, si nous n'avions paseu besoin pour 
des rai sons esthetiquesd'ajouter AAGunBase a I 'animation, nous n'aurionseuquecedernier changement 
a operer dans AirRaid2.as. Ce point illustre bien la flexibility d'ActionScript lorsque vous utilisez 
une classe differente pour chaque element mouvant. 

N ousavons maintenant un jeu Air Raid II entierementtransformequi utilise une mitraillette pivotante 
mais stationnaire. 
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Space Rocks 



Codes sources 
(H^T^c http://flashgameu.com 

A3G PU07 SpaceRocks.zip 



L'un desjeux video les plus classiques detous les temps s'est appele Asteroids. Cejeu d'arcade 
vectoriel a ete commercialise par Atari en 1979. Ces graphismes se limitaient a de simples lignes 
unies, il emettait des sons plus que rudimentaires et Ton pouvait aisement tricher et gagner. M algre 
cela, il se revelait tout a fait captivant. 

Le joueur controlait un petit vaisseau. Vous pouviez tourner, tirer et voler dans I'ecran. Face a vous 
se trouvaient quelques grands asteroides qui se deplacaient a vitesse variable et dans des directions 
aleatoires. Vous pouviez lesfaire eclater en asteroides plus petits en tirant dessus. Les asteroides les 
plus petits disparaissaient lorsque Ton ti rait dessus. Si un asteroide vous touchait, vous perdiez une 
vie. 

Nous allons construire un jeu qui fonctionneselon lememeprincipe, avec un vaisseau, des asteroides 
et des missiles. Nous utiliserons meme I'une des fonctionnalites les plus avancees du jeu original : un 
bouclierde protection. 

Elements du jeu et conception 

Avantdecommencer, nousdevons decider a quoi ressemblera notrejeu Space Rocks. Nous n'aurons 
pas besoin de creer un document de conception complet, mais quelques listes nous aideront a rester 
concentres a mesure que nous construisons le jeu de toutes pieces. 

Les elements du jeu sont un vaisseau, des asteroides et des missiles. Chacune des variantes est 
presentee a la Figure 7.8. 

Examinons les capacites du vaisseau. Voici une liste de ce que le vaisseau peut faire : 

• II apparaitau milieu de I'ecran au depart, en position stationnaire. 

1 1 tourne a gauche lorsque la touche flechee de gauche est enfoncee. 

• II tourne a droite lorsque la touche flechee de droite est enfoncee. 

• II accelere vers I'avant lorsque la touche flechee du haut est enfoncee. 
o II sedeplaceenfonctiondesavelocite. 

■ II genereun bouclier lorsque la toucheZ est enfoncee. 
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Figure 7.8 

Les elements du jeu 
pour Space Rocks. 




Le vaisseau lance un missile. Voici ce que font les missiles : 

• lis sont crees lorsque le joueur appuie sur la barre d'espace. 

a Leur velocite et leur position sont determinees par I 'emplacement et la rotation du vaisseau. 

• lis se deplacent en fonction de leur velocite. 
Voici maintenant ce que font les asteroides : 

• lis ont une velocite et une vitesse de depart aleatoi res. 

• lis se deplacent en fonction de leur velocite. 

• lis pivotent avec une vitesse de rotation definie. 

• lis possedenttrois tai lies differentes : grande, moyenneet petite. 

Les collisions font I'essentiel decejeu. II en existedeux types : eel le du missile avec un asteroide et 
celled'un asteroide avec le vaisseau. 

Lorsqu'un missile et un asteroide entrent en collision, I' asteroide d'origine est supprime. S'il 
s'agissaitd'un asteroide version "grand", deux asteroides de tai I le moyenne apparaissent au meme 
emplacement. S'il s'agissaitd'une version "moyen", deux "petits" asteroides apparaissent au meme 
emplacement. Les petits asteroides se contentent de disparaitre, sans etre remplaces par aucun. Le 
missile est egalement supprime apres la collision. 

Lorsqu'un asteroide entre en collision avec le vaisseau, il se comporte comme si un missile I'avait 
touche. Le vaisseau est pour sa part supprime. L e joueur a trois vies. S'il nes'agit pasde la derniere 
vie du joueur, celui-ci obtient un autre vaisseau qui apparait au centre de I'ecran au bout de deux 
secondes. 
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Si lejoueur detruit tous les asteroides et qu'il n'en reste pi us a I'ecran, I e niveau esttermine. Apres un 
court delai, une nouvel I e vague d' asteroides apparait, un peu plus rapideque la precedents 



Dans la plupart des versions des annees 1970 du jeu Asteroids, il existait une vitesse maxi- 
male limite des asteroides. Cette contrainte permettaitauxjoueurs experts dejouer indefini- 
ment ou a tout le moins jusqu'a ce que le patron de la sal le de jeux les en chasse ou que 
ma man leur rappelle tres fermement qu'il eta it I'heure de diner. 



Parmi les autres actions possiblesdu joueur, I'uneconsisteagenererun bouclier. L'appui surlatouche 
Z creeun bouclier autourdu vaisseau pendant 3 secondes. Cebouclierpermetau vaisseau de traverser 
des asteroides sans se detruire. Les joueurs n'ont cependant que trois boucliers par vie et doivent les 
utiliser avec precaution. 

L'un des aspects importants du jeu tient a ce que le vaisseau et les asteroides bouclent leur parcours 
autour de I'ecran lorsqu'ils se deplacent. Si l'un d'entre eux quitte I'ecran a gauche, il reapparait a 
droite. S'il le quitte par le bas, il reapparait en haut. Les missiles, pour leur part, vont jusqu'au bord 
de I'ecran puis disparaissent. 

Definir les graphismes 

II nous fautun vaisseau, des asteroi'des etun missile pour creercejeu. Le vaisseau est I ' element I e pi us 
complexe. II doit avoir un etat normal, un etat avec un propulseur active et une animation d' explosion 
lorsqu'il esttouche. II a aussi besoin d'un bouclier qui le recouvre de temps a autre. 

La Figure 7.9 presente un clip du vaisseau qui explose. Plusieurs images sont uti I i sees. La premiere 
correspond au vaisseau sans les gaz et la seconde, au vaisseau avec ses gaz actives. Le reste des 
images consiste en une courte animation d'explosion. 

Les boucliers correspondent en realite a un autre clip place a I'interieur du clip du vaisseau. Ce clip 
est present a lafoissur la premiere (sans gaz) et la deuxieme(avec gaz) image. Nousdesactiverons le 
bouclier en attribuant la valeur false a sa propriete visible. Lorsque nous en aurons besoin, nous 
le reactiverons en attribuant cette fois la valeur true a la propriete visible. 

Les asteroides correspondront en fait a une serie de clips. II en existera trois pour les trois tail les : 
Rock_Big, Rock_Medium et Rock_smaii. Les trois clips auront a leur tour trois images representant les 
variantes des asteroides. Nous eviterons ainsi que tous les asteroides se ressemblent. La Figure 7.10 
presente le clip Rock_Big dans lequel vous remarquerez les images-cles qui contiennent les trois 
variantes dans le scenario. 

Le missile est I' element le plus simple. II s'agit simplement d'un petit point jaune. Deux autres clips 
sont aussi utilises : shipicon etshieidicon. II s'agit de versions miniatures du vaisseau etdu bouclier. 
Nous les utiliserons pour afficher le nombre de vaisseaux et de boucliers restants. 
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Figure 7.9 

Dans cette image du 
vaisseau, le bouclier 
et les gaz sont tous 
deux actives. 
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Figure 7.10 

Chaque clip des asteroides 
inclut trois variantes de la 
meme taille. 
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Le scenario principal est configure de la maniere habituelle : trois images, avec eel le du milieu qui 
appelle startspaceRocks. II nous suffit maintenant de creer le code ActionScript pour donner vie 

au jeu. 

Configurer la classe 

Nousallons placer tout le code dans unfichierdeclasseSpaceRocks.as. II s'agiradu plus long fichier 
de classe que nous ayons cree j usque-la. L'avantage lie au fait d'utiliser un unique fichier de classe 
tient a ce que tout le code se trouve conserve dans un endroit. L'inconvenient tient a ce qu'il peut 
devenirlong et difficile a manier. 

Pour simplifier les choses, nous al Ions decomposer le code en plus petites sections, chacune 
traitant un element de I'ecran different. Pour commencer, examinons cependant la declaration de 
classe. 

La classe requiert les importations habituelles pour gerer I'ensemble des objets et structures : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. text.*; 
import flash. utils.getTimer; 
import flash. utils. Timer; 
import f lash. geom. Point; 

U n certain nombre de constantes permettent d'ajuster le comportement et la difficulty du jeu. Les 
vitesses sont toutes mesurees avec des unites calees sur les millisecondes, de sorte que la vitesse 
de rotation du vaisseau (snipRotationSpeed) est une vitesse plutot rapide de 0,1/1000 soit 100 
degres par seconde. Les missiles se deplacent a 200 pixels par seconde et les propulseurs 
accelerent le vaisseau a 150 pixels par seconde par seconde. 



La vitesse est mesuree en unite de distance par temps, par exemple en pixels par seconde. 
L'acceleration designe la variation de vitesse au cours du temps : le nombre de pixels par 
seconde dont la vitesse change par seconde. Voila pourquoi il faut ecrire : pixels par seconde 
par seconde. 



La vitesse des asteroT des depend du niveau. E He est de 0,03 pi us 0,02 fois le niveau, soit 0,05 pour le 
premier niveau, 0,07 pour le second, etc. 
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Nous definissons aussi le rayon du vaisseau, qui est a peu pres de forme ronde. Nous utiliserons ce 
rayon pour detecter les collisions au lieu denousappuyer sur la fonction nitTestobject : 

public class SpaceRocks extends MovieClip { 

static const shipRotationSpeed: Number = .1; 

static const rockSpeedStart: Number = .03; 

static const rockSpeedIncrease:Number = .02; 

static const missileSpeed:Number = .2; 

static const thrustPower:Number = .15; 

static const shipRadius: Number = 20; 

static const startingShips:uint = 3; 

A pres les constantes, nous devons definir une serie de variables a configurer par la suite. Voici les 
variables qui contiennent des references au vaisseau, aux asteroides et aux missiles : 

/ / Objets du jeu 
private var ship:Ship; 
private var rocks :Array; 
private var missiles:Array; 

Ensuite, nous avons un minuteur d'animation qui sera utilise pour mettreau pas tous les mouvements : 

// Minuteur d'animation 
private var lastTime:uint; 

Les touches flechees de gauche, de droite et du haut seront consignees par les valeurs booleennes 
suivantes : 

// Touches flechees 

private var rightArrow: Boolean = false; 
private var leftArrow: Boolean = false; 
private var upArrow: Boolean = false; 

La velocite du vaisseau sera decomposee en deux valeurs de vitesse : 

// Velocite du vaisseau 
private var shipMoveX:Number; 
private var shipMoveY:Number; 

Nous avons deux minuteurs. L'un correspond au del ai entre le moment ou lejoueur perd un vaisseau 
et celui ou le suivant apparait. Nous I'utiliserons aussi pour imposer un delai avant I'affichage du 
prochain ensemble d'asteroides lorsque tous les asteroides ont ete detruits. L'autre correspond a la 
duree d'activation du bouclier : 

// Minuteurs 

private var delayTimer: Timer; 
private var shieldTimer:Timer; 
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U ne variable gameMode peut se voi r attri buer I es val eurs "play" ou "delay". Lorsqu'ellevaut "delay", 
nous n'ecoutons pas les appuis sur les touches du joueur. U ne autre variable booleenne nous indique 
si le bouclier est actif, auquel cas le joueur ne peut etretouche par lesasteroides : 

// Mode du j eu 

private var gameMode: String; 
private var shieldOn: Boolean; 

L'ensemblede variables suivantconcernelesboucliersetlesvaisseaux. Les deux premieres consignent 
le nombre de vaisseaux et de boucliers. Les deux suivantes sont des tableaux contenant des references 
aux icones affichees a I'ecran qui convoient ces informations au joueur : 

// Vaisseaux et boucliers 
private var shipsLeft:uint; 
private var shieldsLeft:uint; 
private var shiplcons : Array; 
private var shieldIcons:Array; 

Le score est stocke dans gameScore. II est affiche dans un champ texte que nous allons creer nomme 
scoreDispiay. La variable gameLevei tient le registre du nombre d'ensembles d'asteroides qui ont 
ete detruits : 

// Score et niveau 
private var gameScore: Number; 
private var scoreDisplay:TextField; 
private var gameLevei :uint; 

Pour finir, nous avons deux sprites dans lesquels nous placerons tous les elements du jeu. Le 
premier est gameobjects et correspondra a notre sprite principal. Nous placerons cependant 
les icones de vaisseau et de bouclier ainsi que le score dans le sprite scoreobjects afin de les 
conserver a part : 

// Sprites 

private var gameObjects:Sprite; 
private var scoreObjects:Sprite; 

Demarrer le jeu 

La fonction constructeur commencera par configurer les sprites. II est important que les instructions 
addChiid apparaissent dans cet ordre afin que les icones et le score restent au-dessus des elements 
du jeu : 

// Demarrer le jeu 

public function startSpaceRocksf ) { 
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// Configurer les sprites 
gameObjects = new Sprite(); 
addChild(gameObjects) ; 
scoreObjects = new Sprite(); 
addChild(scoreObjects) ; 

gameLevei est positionne a 1 et shipsLeft, a 3 d'apres les constantes definies precedemment. 

gameScore est fixe a zero egalement. Ensuite, un appel a createShipIcons et a createScoreDisplay 
configure letout. 

Nous les examinerons sous peu : 

// Reinitialiser les objets de score 

gameLevei = 1 ; 

shipsLeft = startingShips; 

gameScore = 0; 

createShipIcons( ) ; 

createScoreDisplay) ) ; 

II nous faut trois ecouteurs, comme pour les jeux Air Raid. L'un sera un appel de fonction d'image 
general, les deux autres concerneront les appuissur les touches : 

// Configurer les ecouteurs 

addEventListener ( Event .ENTER_FRAME,moveGameObjects) ; 

stage. addEventListener ( KeyboardEvent .KEY_D0WN, keyDownFunction) ; 

st age. addEvent Listener (KeyboardEvent.KEY_UP,keyUpFunction) ; 

Pour lancer lejeu, nous positionnons gameMode a "delay" et snieidon a false, puis creons un tableau 
pour stocker les missiles et appelons deux fonctions pour lancer lejeu. La premiere cree le premier 
ensemble d'asteroi'des et la secondecree le premier vaisseau. Comme ces deux fonctions seront par la 
suite appel ees par des mi nuteursevenementi els, nousdevonsinclurenuii en parametreafin deremplir 
I 'emplacement qu'utilisera la valeur du minuteur evenementiel par la suite : 

// Demarrer 
gameMode = "delay" ; 
shieldOn = false; 
missiles = new Array(); 
nextRockWave(null) ; 
newShip(null) ; 
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Objets d'affichage du score et de I'etat 

Le premier grand groupe de fonctions a affaire au nombre de vaisseaux que possede lejoueur, au 
nombre de boucliers restants et au score du joueur. Ces nombres s'affichent dans les trois coins 
de I'ecran. 

L e score apparait sous forme de texte dans le coi n superi eur droit. L e nombre de vaisseaux est i ndi que 
en affichant dezero a trois icones dans le coin inferieur gauche. Le nombre de boucliers est i ndi que en 
affichant dezero a trois icones de bouclier dans le coin inferieur droit. La Figure 7.11 presente lejeu 
au debut lorsque les trois elements sont presents. 



Figure 7.11 

Le score est affiche dans le coin 
superieur droit, le nombre de vies, 
en bas a gauche et le nombre de 
boucliers, en bas a droite. 



ft SpaceRocks.swf 

I Fichier Affichage Corrtrdle Deboguer 




Les deux fonctions suivantes s'occupent de creer les icones de vaisseau et de bouclier en plagant en 
boucle les trois elements a I'ecran. Ces elements sont ajoutes a leurs tableaux respectifs afin que Ton 
puisse y faire reference et les supprimer par la suite : 

// Dessiner le nombre de vaisseaux restants 
public function createShipIcons( ) { 
shiplcons = new Array(); 
for(var i:uint=0;i<shipsLeft;i++) { 

var newShip:ShipFs:Icon = new ShipIcon(); 
newShip.x = 20+i*15; 
newShip.y = 375; 
scoreObjects.addChild(newShip) ; 
shiplcons. push(newShip) ; 

} 

} 
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Voici unefonction similaire pour les icones de bouclier : 
// Dessiner le nonbre de boucliers restants 
public function createShieldIcons( ) { 
shieldlcons = new Array(); 
for(var i: uint=0; i<shieldsLeft; i++) { 

var newShield:ShieldIcon = new ShieldIcon( ) ; 

newShield.x = 530-i*15; 

newShield.y = 375; 

scoreObj ects . addChild ( newShield ) ; 

shieldlcons. push(newShield) ; 

} 




Nous aurions aussi pu eviter d'utiliser des icones et nous servir simplement de champs texte 
pour afficher le nombre de vaisseaux et de boucliers restants. II faudrait moins de code, mais 
I ' effet sera i t vi suel I ement mo i ns i nteressa nt. 



Pour I'affichage du score, nous devons creer un nouveau champ texte et definir ses proprietes. Nous 
utiliserons aussi une variable temporaire TextFormat pour definir le format texte par defaut 

(def aultTextFormat) du champ : 

// Placer le score numerique en haut a droite 
public function createScoreDisplay ( ) { 
scoreDisplay = new TextField(); 
scoreDisplay.x = 500; 
scoreDisplay. y = 10; 
scoreDisplay .width = 40; 
scoreDisplay . selectable = false; 
var scoreDisplayFormat = new TextFormat ( ) ; 
scoreDisplayFormat. color = BxFFFFFF; 
scoreDisplayFormat. font = "Arial"; 
scoreDisplayFormat. align = "right"; 
scoreDisplay. def aultTextFormat = scoreDisplayFormat; 
scoreObj ects . addChild ( scoreDisplay) ; 
updateScore( ) ; 
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A la fin de createScoreDispiay, nous appelons immediatement updatescore pour placer un 0 dans 
le champ, car il s'agit de la valeur de gamescore a ce point. La fonction updatescore sera cependant 
utilisee plus tard aussi , a chaquefoisque nous avons un changement dans le score : 

// Nouveau score a afficher 
public function updateScore() { 

scoreDisplay.text = String(gameScore) ; 

} 

Lorsqu'il est temps de supprimer un vaisseau ou un bouclier, nous devons depiler un element des 
tableaux shiplcons ou shieldlcons et utiliser removechiid sur scoreObjects pour effacer I'icone : 

// Supprimer une icone de vaisseau 
public function removeShipIcon() { 

scoreObjects. removeChild( shiplcons. pop ( ) ) ; 

} 

// Supprimer une icone de bouclier 
public function removeShieldIcon( ) { 

scoreOb j ects . removeChild ( shieldlcons . pop ( ) ) ; 

} 

Nous devons aussi ajouter des fonctions qui parcourent en boucle et suppriment toutes les icones. 
Nous en avons besoin a la fin du jeu. Pour les boucliers, nous en avons besoin a la fin d' une vie. Nous 
souhaitons donner au joueur trois boucliers a chaque nouveau vaisseau. Nous supprimerons done les 
icones de bouclier et recommencerons lorsque cela se produira : 

// Supprimer le reste des icones de vaisseau 
public function removeAHShipIcons() { 
while (shiplcons. length > 0) { 
renoveShipIcon() ; 

} 

} 

// Supprimer le reste des icones de bouclier 
public function removeAHShieldIcons( ) { 
while (shieldlcons. length > 0) { 
renoveShieldIcon() ; 

} 

} 
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Mouvement du vaisseau et entree du joueur 

L'ensemble des fonctions suivantes concerne le vaisseau. La premiere fonction cree un nouveau 
vaisseau. Lereste des fonctions concerne son displacement. 

Creer un nouveau vaisseau 

La fonction newship est appelee au debut du jeu mais egalement 2 secondes apres la disparition 
d'un precedent vaisseau. Lors de ces occasions subsequentes, un minuteur se chargera de cetappel. 
Ce minuteur se verra passer un TimerEvent. Nous n'en aurons cependant pas besoin. 

Lors des deuxieme, troisieme et quatrieme fois ou la fonction est appelee, le precedent vaisseau 
existedeja. II aura joue son animation d' explosion. A la fin decette animation, unecommande stop 
met en pause le clip a la derniere image qui est vide. Le vaisseau est done toujours la, mais il est 
invisible. Nous verifions que I e vaisseau ne vaut pas nun puis le supprimons et I'enlevons avant de 
poursuivre. 



Dans d'autres jeux, il peut etre souhai table de supprimer le vaisseau des que I' animation 
d' explosion est termi nee. Dans ce cas, vous pouvezslmplement placer un rappel a la classe 
principale a I' inter ieur du scenario du vaisseau. Cet appel peut se trouver dans la derniere 
Image de I 'animation, afin d'indiquer que I 'animation est termi nee et que I'objet peut etre 
supprime. 

// Creer un nouveau vaisseau 
public function newShip(event:TimerEvent) { 
// Si le vaisseau existe, le supprimer 
if (ship != null) { 

gameObjects.removeChild(ship) ; 
ship = null; 

} 

Ensuite, nous verifions s'il reste des vaisseaux. S'il n'en reste pas, la parti e est termi nee : 

// Plus de vaisseau 
if (shipsLeft < 1) { 

endGame( ) ; 

return; 

} 

Un nouveau vaisseau est cree, positionne et ramene a la premiere image qui contient un vaisseau 
normal gaz eteints. La rotation est fixeea -90, de maniere a pointer vers le haut. Nous devons aussi 
supprimer le bouclier. 
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Ensuite, nous pouvons ajouter leclip au sprite gameObjects : 

// Creer, positionner et ajouter le nouveau vaisseau 

ship = new Ship( ) ; 

ship.gotoAndStop(1 ) ; 

ship.x = 275; 

ship.y = 200; 

ship. rotation = -90; 

ship. shield. visible = false; 

gameObjects. addChild(ship) ; 

La velocit.edu vaisseau est stockee dans les variables shipwiovex et shipMoveY. M aintenant que nous 
avons cree un vaisseau, gameMode peut passer de "delay 11 a "play" : 

// Configuration des proprietes du vaisseau 
shipMoveX = 0.0; 
shipMoveY = 0.0; 
gameMode = "play" ; 

Pour chaque nouveau vaisseau, nous rei nitial i sons le nombre de boucliers a 3. Ensuite, nous devons 
dessiner les trois petites i cones de bouclier en bas de I'ecran : 

// Mettre en place les boucliers 
shieldsLeft = 3; 
createShieldIcons( ) ; 

Lorsque lejoueur perd un vaisseau et qu'un nouveau vaisseau apparait, il existe une possibility qu'il 
reapparaisse au milieu de I'ecran exactement au moment ou un asteroi'de passe a cet endroit. Pour 
eviter que cela ne pose un probleme, nous pouvons utiliser les boucliers. En activant ces derniers, le 
joueur est assure de ne pas etre victime d'une collision pendant 3 secondes. 



Les jeux d'arcade de ce type evitaient ce probleme a I'origine en attendant simplement que 
le milieu de I'ecran devienne relativement vide avant de creer un nouveau vaisseau. Vous 
pourriez proceder de la meme maniere, en verifiant la distance entre chaque asteroi'de et le 
nouveau vaisseau et en imposant un del a i supplemental re de 2 secondes quand un projectile 
est trap proche. 



Notez que nous ne souhaitons proceder ainsi que si ce n'est pas la premiere fois que le vaisseau 
apparait. A u debut du jeu, les asteroides feront aussi leur premiere apparition et se trouveront a des 
emplacements predefinis situes a I'ecart du centre. 
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Lorsque nous appelons ici startshieid, nous passons la valeur true afin d'indiquer qu'il s'agit d'un 
bouclier "gratuit". II n'est pas decompte dans la reserve destrois boucliers du joueur : 

// Toutes les vies sauf la premiere commencent par un bouclier gratuit 
if (shipsLeft != startingShips) { 
startShield(true) ; 

} 



Gerer I'entree clavier 

Les deux fonctions suivantes s'occupent des appuis sur les touches. Comme avec Air Raid, nous 
survei lions les touches flechees de gauche et de droite. N ous nous occupons aussi de la touche flechee 
du haut. Nousreagissonsegalementa la barre d'espace eta la touche Z. 

Dans le cas de la touche flechee du haut, nous activons le propulseur et al lumons les gaz en demandant 
au vaisseau de passer a la seconde image qui fait apparaitre des flammes a I'arriere. 

La barre d'espace appelle newMissiie et la toucheZ, startshieid : 

// Enregistrer les appuis sur les touches 
public function keyDownFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

leftArrow = true; 
} else if (event. keyCode == 39) { 

rightArrow = true; 
} else if (event. keyCode == 38) { 
upArrow = true; 
// Allumer les gaz 

if (gameMode == "play") ship.gotoAndStop(2) ; 
} else if (event. keyCode == 32) { // Barre d'espace 

newMissiie ( ) ; 
} else if (event. keyCode ==90) { // z 

startShield(false) ; 

} 

} 

La fonction keyiipFunction coupe les gaz lorsque le joueur relache la touche flechee du haut : 

// Enregistrer les relachements de touches 
public function keyUpFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 
leftArrow = false; 
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} else if (event. keyCode == 39) { 

rightArrow = false; 
} else if (event. keyCode == 38) { 

upArrow = false; 

// Eteindre les gaz 

if (gameMode == "play") ship.gotoAndStop(1 ) ; 

} 

} 

Mouvement du vaisseau 

Toutes lesfonctions d' animation decejeu prennent timeDiff en parametre. Cette variable equivaut a 
la variable timePassed des autresjeux avec animation mais, au lieu quechaquefonction d'animation 
calculeson propre temps ecoule, nouslecalculonsdansuneuniquefonctionappeleemoveGameObjects 
qui appelleensuitelestroisfonctionsd'animation et leur passecettevaleur. Touslesobjetssedeplacent 
alorsen parfaite synchronisation les uns avec lesautres. 

Lemouvementdu vaisseau peutconcerner son pivotement, son deplacementversl'avantou les deux. 
Si les touches flechees de gauche ou de droite sont enfoncees, le vaisseau tourne en fonction de 

timeDiff et de la COnstante shipRotationSpeed. 

Si la touche flechee du haut est enfoncee, le vaisseau s'accelere. Nous utilisons alors Math. cos et 
Math . sin pour determiner I 'influence que possede la poussee sur le mouvement horizontal et vertical 
du vaisseau : 

// Animer le vaisseau 

public function moveShip(timeDiff :uint) { 

// Pivoter et accelerer 
if (leftArrow) { 

ship. rotation -= shipRotationSpeed*timeDiff ; 
} else if (rightArrow) { 

ship. rotation += shipRotationSpeed*timeDiff ; 
} else if (upArrow) { 

shipMoveX += Math.cos(Math.PI*ship.rotation/180)*thrustPower; 

shipMoveY += Math.sin(Math.PI*ship. rotation/180)*thrustPower; 

} 

Ensuite, la position du vaisseau est mise a jour en fonction de la velocite : 

// Deplacer 

ship.x += shipMoveX; 

ship.y += shipMoveY; 
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L'une des particularities qui font tout I'attrait de ce jeu tient a la maniere dont le vaisseau peut 
quitter l'ecran d'un cote et reapparaitre de I' autre. Voici le code qui se charge de gerer ce 
mecanisme. Un grand nombre de parametres codes en dur pourraient ici etre separes et definis 
sous forme de constantes au debut du script, mais le code est ainsi plus simple a lire et a 
comprendre. 

L'ecran fait 550 pixels de large et 400 de haut. Nous souhaitons que le vaisseau boucle non pas des 
I'instant ou il atteint le bord de l'ecran mais juste au moment ou on le perd de vue. A 570, le 
vaisseau revient ainsi a 590, cequi le place a -20. Comme il sedeplacerait vers la droite pour eel a, 
il nerestera pashorsdevue. 




Les 20 pixels supplementaires que nous ajoutons aux bords de l'ecran sont une zone morte 
du jeu. Vous ne pouvez pas voir les objets qui y transitent, et les missiles ne s'y trouvent pas 
non plus parce qu'ils disparalssentdes qu'ils atteignent le bord de l'ecran. 

Vous devez vous assurer que cette zone ne solt pas trop grande. Sans eel a, de petits asteroides 
se depl agant verticalement ou horizontalement pourraient di spa raTtre pendant un certain 
temps. Vous pourriez aussi aisement y perdre votre vaisseau. 

A I'inverse, si vous la rendez trop etroite, les objets sembleront se desi ntegrer sur un bord de 
l'ecran et reapparaitre miraculeusement sur I'autre. 



// Faire le tour de l'ecran 
if ((shipMoveX > 0) && (ship.x > 570)) { 
ship.x -= 590; 

} 

if ((shipMoveX < 0) && (ship.x < -20)) { 
ship.x += 590; 

} 

if ((shipMoveY > 0) && (ship.y > 420)) { 
ship.y -= 440; 

} 

if ((shipMoveY < 0) && (ship.y < -20)) { 
ship.y += 440; 

} 



Gerer les collisions du vaisseau 

Lorsque le vaisseau est atteint par un asteroi'de, il doit exploser. Pour cela, il passe a la troisieme 
image intitulee explode. La fonction removeAiishieidicons supprime les icones de bouclier de 
I'ecran. U n minuteur est ensuite configure pour appeler newship au bout de 2 secondes. 
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Le nombre de vaisseaux est reduit d'une unite et removeShipicon est appelee afin de supprimer une 
iconedel'ecran : 

// Supprimer le vaisseau 
public function shipHit() { 

gameMode = "delay" ; 

ship . gotoAndPlay ( " explode " ) ; 

removeAHShieldlconsO ; 

delayTimer = new Timer(2000, 1 ) ; 

delayTimer . addEven t Listener! Time rEvent .TIMER_COMPLETE, newShip) ; 
delayTimer. start () ; 
removeShipicon () ; 
shipsLeft - - ; 



Levez vos boucliers ! 

Le bouclier est une partie un peu a part du vaisseau. II figure sous la forme d'un clip a I'interieur du 
clip Ship. Pour I'activer, il nous suffit done de positionner sa propriete visible a true. Un minuteur 
est defini pour ledesactiver au bout de3 secondes. Entre-temps, shieidon est positionne a true afin 
que toutes les collisions avec les asteroTdes soient ignorees. 



Le bouclier est en fait un graphisme semi-transparent qui laisse transparaltre le vais- 
seau. U n parametre alpha est applique aux couleurs utilisees dans le degrade du bou- 
clier. Aucun code ActionScript n'est requis pour cela : le graphisme est simplement 
dessine de cette maniere. 

La fonction startshieid opere egalement une verification au debut et a la fin de la fonction. Au 
debut, el I e s' assure qu'il reste des boucliers au joueur. Ensuite, el le s' assure que le bouclier n'est pas 
deja active. 

A la fin, elleverifiele parametre freeShieid. S'il vaut false, nous reduisonsle nombre de boucliers 
disponibles d'une unite et mettons a jour I'ecran : 

// Activer le bouclier pour 3 secondes 

public function startShield (freeShieid: Boolean) { 

if (shieldsLeft < 1) return; // Aucun bouclier restant 

if (shieldOn) return; // Bouclier deja active 

// Activer le bouclier et configurer le minuteur pour sa deactivation 
ship. shield. visible = true; 
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shieldTimer = new Timer(3000, 1 ) ; 

shieldTimer. addEvent Listener (TimerEvent .TIMER_COMPLETE,endShield) ; 
shieldTimer. start() ; 

// Mettre a jour le nombre de boucliers restants 
if (IfreeShield) { 

removeShieldIcon( ) ; 

shieldsLeft - - ; 

} 

shieldOn = true; 

} 

Lorsque le minuteur s'arrete, le bouclier est de nouveau rendu invisible et la variable booleenne 

shieldOne est positionnee a false : 
// Desactiver le bouclier 
public function endShield( event :TimerEvent) { 

ship. shield. visible = false; 

shieldOn = false; 

} 

Asteroides 

Viennent ensuite les fonctions qui gerent les asteroides. Nous avons des fonctions pour creer des 
asteroides, pour les supprimer et pour les detruire. 

Creer de nouveaux asteroides 

II existe trois tail les d' asteroides. Quand newRock est appelee, el I e Test avec le parametre rockType 
qui specifie la tai I le du nouvel asteroi'de. A u debut dujeu, tousles asteroides sontcrees avec I'option 
de tai lie "Big". Dans la suite du jeu, nous creons en revanche des paires d' asteroides a chaquefrappe 
demissilequi uti I i sent I es tai 1 1 es "Medium" et "Small". 

II existe pourchaquetailleun rockRadius correspondantde35, 20 et 10. Nousutiliseronscesnombres 
pour detecter les collisions par la suite. 

Pour finirde creer I' asteroi'de, une velocite verticale est choisie en obtenant des valeursal eatoi res pour 
dx et dy. Nous recuperons aussi une valeur aleatoire pour dr, la vitesse de rotation. 

L'un des autres elements aleatoires est la variation des asteroides. Chaque clip contient trois images 
representant chacune un asteroi'de d' aspect different. 
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II sera it interessant de calculer dynamiquement le rayon de chaque asteroi'de en testa nt les clips 
des asteroi'des eux-memes mais, a ce stade, nous n'en avons encore cree aucun et ne pouvons 
done pas obtenir ces valeurs. Du reste, ce ne sont pas ces valeurs que nous souhaitons. E I les 
inclueraient en effet les points les plus eloignes dans les graphismes, or nous souhaitons un 
nombre plus reduit qui donne une meilleure approximation du rayon global des asteroi'des. 

Le tableau rocks est constitue d'objets de donnees incluant une reference au clip rock, les valeurs dx, 

dy et dr, ainsi que rockType ( I a tai 1 1 e) et rockRadius : 

// Creer un unique asteroide d'une taille specifique 
public function newRock(x,y : int, rockType: String) { 

// Creer la nouvelle classe appropriee 
var newRock:MovieClip; 
var rockRadius:Nunber; 
if (rockType == "Big") { 

newRock = new Rock_Big(); 

rockRadius = 35; 
} else if (rockType == "Medium") { 

newRock = new Rock_Medium( ) ; 

rockRadius = 20; 
} else if (rockType == "Small") { 

newRock = new Rock_Small( ) ; 

rockRadius = 10; 

} 

// Choisir une apparence aleatoire 

newRock. gotoAndStop( Math. ceil (Math . random ( )*3) ) ; 

// Definir position de depart 
newRock. x = x; 
newRock. y = y; 

// Definir nouvement et rotation aleatoires 
var dx:Number = Math. random()*2. 0-1 .0; 
var dy:Number = Math. random()*2. 0-1 .0; 
var dr:Number = Math. random( ) ; 

// Aj outer a la scene et a la liste rocks 
gameObjects.addChild(newRock) ; 

rocks. push ({rock: newRock, dx:dx, dy:dy, dr:dr, rockType: rockType, rockRadius: rockRadius}); 
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Creer des vagues d'asteroi'des 

Au debut du jeu et a chaque nouvelle vague d'asteroi'des, nous appelons la fonction suivante pour 
creer quatre gros asteroides, tous espaces de maniere egale a I'ecran. La Figure 7.12 montre les 
positions des asteroides au tout debut du jeu. 



Figure 7.12 

Les quatre asteroides 
sont places a 100 pixels 
de distance des cotes et 
des bords superieur et 
inferieur de I'ecran. 



eoe 



SpaceRocks.swf 




Noussouhaitonsdonnera gameMode la valeur play. S'il s'agitdela premiere vague d'asteroi'des, nous 
avonsdeja donnea gameMode la valeur play. S'il nes'agit pasdela premiere vague, le gameMode doit 
avoir ete modifies avec la valeur delay dans la fonction snipHit. Nous lui attribuonsdonc ici la valeur 
play par securite : 

// Creer quatre asteroides 

public function nextRockWave(event:TimerEvent) { 
rocks = new Array( ) ; 



newRock(100,100, 
newRock(100,300, 
newRock(450,100, 
newRock(450,300, 
gameMode = "play 



Big") 
Big") 
Big") 
Big") 
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La fonction newRockwave cree a chaque fo is quatre asteroi'des au meme emplacement. Vous 
pourriez cependant souhaiter compliquer cette fonction en verifiant la valeur de gameLevei et 
en utilisant des vagues de six asteroi'des au lieu de quatre pour les niveaux superieurs a trois 
ou quatre. Voila un bon moyen de pimenter le jeu. II serait possible aussi d'ajouter des aste- 
roi'des de petite et moyenne tailles des le debut de certains niveaux. 



Deplacer les asteroi'des 

Pour deplacer les asteroi'des, nous devons simplement examiner chacun des asteroi'des et obtenir les 
valeurs dans chaque objetdu tableau rocks. La position est modifieeen fonction desvaleursdx etdy. 
La rotation est modifiee en fonction de la valeur dr. 

Commeavec levaisseau, nous devons f aire passer les asteroi'des d'un cote de I'ecran au cote oppose. 
Le code qui gere ce mouvement est pratiquement le meme, les asteroi'des etant autorises a sortir de 
20 pixels en dehors de I'ecran avant de faire leur boucle et de reapparaitre cote oppose en ajoutant 
40 pixels (20 de chaque cote) a la largeur de I'ecran : 

// Animer tous les asteroides 
public function moveRocks(timeDiff :uint) { 
for(var i: int=rocks. length -1 ;i>=0;i- - ) { 

// Deplacer les asteroides 

var rockSpeed: Number = rockSpeedStart + rockSpeedIncrease*gameLevel; 
rocks[i] .rock.x += rocks[i] .dx*timeDiff *rockSpeed; 
rocks[i] .rock.y += rocks[i] .dy*timeDiff *rockSpeed; 

// Faire pivoter les asteroides 

rocks[i] .rock. rotation += rocks[i] .dr*timeDiff *rockSpeed; 

// Faire boucler les asteroides 
if ( (rocks[i] .dx > 0) && (rocks[i] . rock.x > 570)) { 
rocks[i] . rock.x -= 590; 

} 

if ( (rocks[i] .dx < 0) && (rocks[i] . rock.x < -20)) { 
rocks[i] . rock.x += 590; 

} 

if ( (rocks[i] .dy > 0) && (rocks[i] . rock.y > 420)) { 
rocks[i] . rock.y -= 440; 
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} 

if ( (rocks [i] .dy < 0) && (rocks[i] .rock.y < -20)) { 
rocks[i] . rock.y += 440; 

} 

} 

} 

Collisions des asteroides 

Lorsqu'un asteroide est to uche, la fonction rockHit decide cequ'elle doit en faire. Dans lecas d'un 
gros asteroide, deux asteroides moyens sont crees a la place. Dans le cas d'un asteroide moyen, deux 
petits asteroides leremplacent. Ilscommencentau meme emplacement que I'ancien, maisobtiennent 
des vitesses de rotation et des directions aleatoi res. 

Dans ces deux cas et dans le cas ou c'est un petit asteroide qui est touche, I' asteroide d'origine est 
supprime : 

public function rockHit (rockNum:uint) { 
// Creer deux asteroides plus petits 
if ( rocks [ rockNum] . rockType == "Big") { 

newRock( rocks [rockNun] . rock.x, rocks [ rockNum] . rock.y, "Medium" ) ; 

newRock( rocks [rockNun] . rock.x, rocks [ rockNum] . rock.y, "Medium" ) ; 
} else if ( rocks [ rockNum] . rockType == "Medium") { 

newRock( rocks [rockNum] . rock.x, rocks] rockNum] . rock.y, "Small" ) ; 

newRock(rocks[rockNum] . rock.x, rocks[rockNum] .rock.y, "Small") ; 

} 

// Supprimer 1' asteroide d'origine 
gameObjects.removeChild( rocks [rockNum] .rock) ; 
rocks . splice ( rockNum, 1 ) ; 

} 

Missiles 

Les missiles sont crees lorsquelejoueurappuiesur la barred' espace. La fonction newMissiie utilise 
la position du vaisseau pour lancer le missile et recupere en outre la rotation du vaisseau afin de 
determiner la direction du missile. 

Le missile n'est cependant pas positionne au centre du vaisseau ; il se trouve a un snipRadius de 
di stance dece centre, dansla memedirection quecellequesuivra lemissileen s'eloignant. Cereglage 
evite que les missiles paraissent provenir du centre du vaisseau. 
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Nous utilisons ici, pour simplifier les missiles, une astuce qui consiste a les representer par 
un rond. Nous n'avons ainsi pas besoin de faire pivoter le missile selon un angle particulier. 
Les objets ronds possedent la bonne apparence quelle que soit la direction dans laquelle ils 
se deplacent. 



Nous tenons le registre de tous les missiles avec le tableau missiles : 

// Creer un nouveau missile 
public function newMissile() { 
// Creer 

var newMissile:Missile = new Missile(); 
// Definir direction 

newMissile.dx = Math. cos(Math.PI*ship. rotation/180) ; 
newMissile.dy = Math. sin(Math.PI*ship. rotation/180) ; 

// Placement 

newMissile.x = ship.x + newMissile.dx*shipRadius; 
newMissile.y = ship.y + newMissile.dy*shipRadius; 



// Ajouter a la scene et au tableau 
gameObj ects . addChild ( newMissile) ; 
missiles. push(newMissile) ; 

} 

Lorsque les missiles se deplacent, nous utilisons la constante missiiespeed et timeDiff pour 
determiner le nouvel emplacement. 

Les missiles ne reviennent pas de I'autre cote de I'ecran lorsqu'ils en sortent comme les asteroTdes et 
levaisseau. lis disparaissent simplement en quittant I'ecran : 

// Animer les missiles 

public function moveMissiles(timeDiff :uint) { 
for(var i:int=missiles.length-1 ;i>=0;i--) { 
// Deplacer 

nissiles[i] .x += missiles[i] .dx*missileSpeed*timeDiff ; 
nissiles[i] .y += missiles[i] .dy*missileSpeed*timeDiff ; 
// Le bord de I'ecran est passe 
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if ( (missiles[i] .x < 0) II (missiles [i] .x > 550) II 

(missiles[i] .y < 0) II (missiles[i] .y > 400)) { 
gameObjects. removeChild(missiles[i] ) ; 
missiles. splice(i,1 ) ; 

} 

} 

} 

Lorsqu'un missiletouche un asteroTde, il estegalementsupprimeavec un appel amissiieHit : 

// Supprimer le missile 

public function missileHit(missileNum:uint) { 

gameObjects. renoveChild(nissiles[missilel\lum] ) ; 
missiles. splice(missileNum,1 ) ; 

} 

Nous supprimons les missiles dans moveMissiles a I'aide d'un bloc de code separe au lieu 
d'appeler missiiemt, par precaution pour I'avenir. Les deux evenements se produisent 
dans des circonstances differentes. Si nous souhaitons que quelque chose de particulier se 
produise lorsque le missile atteint une cible, nous pourrons le placer dans missiiemt. 
Or nous ne souhaiterions pas dans ce cas que le meme evenement se produise lorsque le 
missile a juste quitte I'ecran. 




Controle du jeu 

J usque-la, nousavonseu troisfonctions d'animation : moveShip, moveRocks et moveMissiles. Toutes 
trois sontappelees par la fonction d'animation principale, moveGameObjects. A son tour, cettederniere 
est appel ee par r evenement enter_frame que nous avons configure precedemment. 

Deplacer les objets du jeu 

La fonction moveGameObjects calcule le temps ecoule (timePassed) comme lefaisaitAir Raid et 
transmet cette valeur a ces trois fonctions. Notez que moveShip n'est appel ee que si gameMode ne 
possede pas la valeur "delay". 

Pour finir, moveGameObjects appel le checkCoiiisions, qui est un organe central de notrejeu : 
public function moveGameObjects(event:Event) { 
// Calculer le temps ecoule et animer 
var timePassed :uint = getTimer() - lastTime; 
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lastTime += timePassed; 
moveRocks(timePassed) ; 
if (gameMode != "delay") { 
moveShip(timePassed) ; 

} 

moveMissiles(timePassed) ; 
checkCollisions( ) ; 



Verifier les collisions 

La fonction checkcoiiisions realise les calculs critiques. Elle parcourt en boucle tous les asteroides 
ettous les missiles et veri fie si certains sont entres en collision les uns avec les autres. Le rockRadius 
des asteroides est uti Use pour determi ner I es col I i si ons. C e mecani sme est pi us rapi de que I ' approche 
qui consiste a appeler hitTestPoint. 

S'il y a une collision, les fonctions rockHit et missiieHit sont appelees pour se charger des deux 
extremites de la collision. 

Si un asterol'de et un missile doivent etre supprimes a ce stade, il est important qu'aucun d'entre eux 
ne soit plus teste pour les collisions possibles avec d'autres objets. Chacune des deux boucles for 
imbriqueessevoitdonc attribuer une etiquette. L'etiquette offreun moyen de specifier a laquel le des 
boucles for une commande break ou continue est destinee. Dans le cas present, nous souhaitons 
continuer dans la boucle rockioop, qui correspond a la boucle externe des boucles imbriquees. Une 
simple commande break amenerait le code a continuer a tester I'astero'i'de pour voir s'il est entre en 
collision avec le vaisseau. Commel'asteroi'de n'existe plus, cette operation produirait uneerreur : 

// Rechercher les missiles entres en collision avec des asteroides 
public function checkCollisions( ) { 

// Parcourir les asteroides en boucle 

rockioop: for(var j :int=rocks. length -1 ; j>=0;j --) { 
// Parcourir les missiles en boucle 

missileloop: f or(var i:int=missiles.length-1 ; i>=0;i- - ) { 
// Detection de collision 

if (Point. distance(new Point (rocks[j ]. rock. x, rocks[ j ]. rock. y) , 
new Point (missiles [i] . x, missiles [i] .y) ) 
< rocks[ j ]. rockRadius) { 



// Suppression de l'asteroide et du missile 
rockHit (j ) ; 
missileHit(i) ; 
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// Mise a jour du score 
ganeScore += 10; 
updateScore( ) ; 

// Nous sortons de cette boucle et reprenons la suivante 
continue rockloop; 

} 

} 

C haque asteroide est teste afin devoir s'i I entreen collision avec levaisseau. Pour commencer, nous 
devons nous assurer que nous ne nous trouvons pas dans I' interval I e entre la disparition du vaisseau 
et sa reapparition. N ous devons aussi nous assurer que le bouclier est desactive. 

Si le vaisseau est touche, nous appelons les deux fonctions shipmt et rockmt : 

// Verifier si un asteroide heurte le vaisseau 
if (gameMode == "play") { 

if (shieldOn == false) { // only if shield is off 

if (Point. distance(new Point (rocks[j ]. rock. x, rocks[ j ]. rock. y) , 
new Point(ship.x,ship.y) ) 

< rocks[j ] . rockRadius+shipRadius) { 

// Supprimer le vaisseau et 1' asteroide 
shipHit() ; 
rockHit( j ) ; 

} 

} 

} 

} 

U nefois que cneckcoiiisions a termine, el I e examine rapidement le nombre d' asteroides a I'ecran. 
Si tous les asteroides ont ete supprimes, un minuteur est configure pour lancer une nouvelle vague au 
bout de 2 secondes. gameLevei est incrementee d'une unite, afin que les asteroides suivants soient 
plus rapides. gameMode se voit aussi attribuer la valeur "betweenieveis". Cela signifie que la 
verification ne sera pas real i see avant que I 'asteroide ne reapparaisse, mais le joueur reste libre de 
deplacer levaisseau : 

// Plus d'asteroide, changer le mode du jeu et en recreer 
if ( (rocks. length == 0) && (gameMode == "play")) { 

gameMode = "betweenieveis"; 

gameLevel++; // Avancer d'un niveau 

delayTimer = new Timer ( 2000, 1 ) ; 



288 ActionScript 3.0 pour les jeux 



delayTimer .addEventListener(TimerEvent .TIMER_COMPLETE,nextRockWave) ; 
delayTimer. start () ; 

} 

} 

Terminer la partie 

Si le vaisseau a ete touche et qu'il n'en reste plus, la partie est terminee et la fonction endGame est 
appelee. Celle-ci s'occupe du nettoyage habituel et conduit I'animation a la troisieme image du 
scenario : 

public function endGame () { 

// Supprimer tous les objets et ecouteurs 
removeChild(gameObjects) ; 
removeChild(scoreObjects) ; 
gameObjects = null; 
scoreObjects = null; 

removeEvent Listener ( Event .ENTER_FRAME,moveGameObjects) ; 

stage. removeEventListener(KeyboardEvent .KEYJDOWN, keyDownFunction) ; 

stage. removeEvent Listener (KeyboardEvent .KEYJJP, keyUpFunction) ; 

gotoAndStop( "gameover" ) ; 

} 

Modifier le jeu 

La fonctionnalite du bouclier dans ce jeu ne figure pas dans le jeu Asteroids original. On la trouve 
cependant dans ses variantes ulterieures et dans bien d'autresjeux du meme genre. Le jeu d'origine 
contient pour sa part une autre fonctionnalite qui permet de faire disparaitre le vaisseau pour le faire 
reapparaitre a un emplacement aleatoire. Si cela conduit souvent le joueur a sa perte, c'est aussi un 
bon va-tout pour celui qui neparvient pas a s'echapper d'une situation ou il se trouve pris en etau. 

L'ajout de cette fonctionnalite est tres simple : il suffit d'inclure un autre appui de touche dans 
keyDownFunction puis d'attribuer des valeurs x et y aleatoiresau vaisseau. 

Lejeu pourrait etre ameliore avec des elements simples comme des sons ou d'autres animations. 
La flamme du propulseur pourrait etre animee en remplacant le graphisme actuel par un symbole 
graphique en boucle dans le clip. Aucun code ActionScript n'est requis pour cela. 

Vous pourriez egalement ajouter des vies supplemental res : c'est une fonctionnalite bien courante 
dans ce type de jeu. Definissez simplement un palier pour le score, comme 1 000, etajoutez une unite 
a snipsLef t. Vous devrez retracer les i cones des vaisseaux a ce moment, et pourquoi pas emettre un 
son pour signaler I'attribution du bonus. 
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La plupart desjeux dece genre sur leWeb nesont pasdesjeux dans I'espace. Ce concept general 
peut etre utilise a des fins educatives ou commerciales en remplacant les asteroides par des objets 
specifiques. Par exemple, il peut s'agir de noms et de verbes, le joueur n'etant suppose tirer que 
sur les noms. II pourrait aussi s'agir de bouts de papier a ramasser que vous etes cense nettoyer. 

Une modification simple pourrait consister a oublier completement les missiles et a faire des 
collisions entre le vaisseau et les asteroides un objectif en soi. Vous pourriez ainsi recolter des 
objets au lieu de tirer dessus. II pourrait notamment etre interessant de devoir recolter certains 
objets et en eviter d'autres. 
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Les "casual games" : 
Match Three 

Au sommaire de ce chapitre : 

• Classe reuti lisable : PointBursts 

• Match Three 
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A leurs debuts, les jeux video etaient simples et amusants. L'un des plus populaires d'entre eux 
eta it ainsi un petitjeu de puzzle appeleTetris. Les graphismes 3D ont ensuite repousse les limites 
de cet univers et permis de creer des mondes virtuels en camera subjective et deveri tables jeux de 
role en ligne. 

Les jeux de puzzle ont cependant connu un regain desucces au debut de cette decennie avec les 
jeux en ligne gratuitset les jeux telechargeables. On baptise en anglais cette categoriede jeux les 
casual games. 




L'appellation casual game n'est pas toujours tres claire. Wikipedia en propose la defini 
suivante : "une categoriedejeu eiectroniqueou de jeu d'ordinateur ciblant le grand pub 



fiition 

. .j grand public". 

Cette definition est un peu large. On pourrait plus precisement parler de "jeux M atch Three", 
car la plupart des sites Web qui proposent des casual games vendentprincipalementdesjeux 
comme M atch Three. 

Bon nombre des jeux de ce livre correspondent cependant a la definition plus large. En fait, 
de nombreux puzzles d'images et de mots sont souvent vendus avec M atch Three. 



La plupart des casual games sont des jeux de puzzle d'action, autrement dit desjeux qui combinent 
un puzzle avec une sorte de mouvement ou un del ai dans le temps pour pimenter lejeu. 

Lejeu M atchThree estdeloin lepluscourant des casual games. Pres de la moitiedesjeux surles sites 
Web populaires de casual games sont des vari antes de M atch Three. 

Danscechapitre, nous allonsdecouvrircommentcreerl'explosion de points, un effet special populaire 
utilise dans les casual games. Ensuite, nous construirons un jeu M atch Three classique. 



Classe reutilisable : Point Bursts 



Codes sources 

http://flashgameu.com 
A 3G P U 08 Poi n tB u r st.zi p 



Aux debuts des jeux d'arcades, lorsque le joueur reussissait une action, il se voyait attribuer des 
points. Cela n'a pas change. Cequi a change, c'estlemoyen dele signaler. 

Danslesjeuxd'arcadeanciens,onnevoyaitlescoresemodifierqu'aucoindel'ecran.M alheureusement, 
le plus souvent, ce n'est pas a cet endroit que I'on regarde et Ton ne peut s'y reporter qu'unefois le 
feu de I'action bien passe. II est done judicieux que les jeux aient evolue et affichent le nombre de 
points gagnes directement a I'emplacement de I'ecran ou I'action se produit. 
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Vous decouvrirez cela dans pratiquement tous les casual games pour leWeb. La Figure 8.1 presente 
mon jeu Gold Strikejusteau moment ou lejoueur clique surdes I ingots d'or pour marquerdes points. 
Vous pouvez voir le texte "30" a I'emplacement ou se trouvaient auparavant les lingots d'or. Ces 
nombresgrossissenten un instant puisdisparaissent. I Is sont juste assez longtempsa I'ecran pourfaire 
remarqueraujoueurlenombrede points qu'il a marques. 



Figure 8.1 

Le nombre de points marques 
s'affiche directement a I'endroit 
ou sesitue I'action. 



o ^ " 



J 'appelle cet effet une explosion de points. II est si courant etje I'utilise si frequemment qu'il s'agit 
d'un excellent exemple de classe sped ale qui peut etre creee puis reuti I i see dans de nombreux jeux. 



Developper la classe PointBurst 

La classe PointBurst.as doit etre aussi autonome que possible. En fait, notre but est de pouvoir 
utiliser une explosion de points avec une seule ligne de code dans le jeu. La classe elle-meme a done 
besoin des'occuperdecreerle texte etle sprite, de I 'animeretdesuppri merle tout par elle-meme une 
fois qu' el le a termine. 



Notre classe PointBurst pourra etre uti I i see avec une seule ligne, mais ne necessitera aucun 
element dans la bibliotheque de I ' a ni mati on principale a I ' exception d'une police uti I i see 
pour I ' affichage des points. 



La Figure 8.2 presente une version eta lee dans le temps de ce que nous al Ions creer. L'explosion de 
points doit commencer par un score a taille reduite qui grossit progressivement. En outre, I'opacite 
doit etre au depart de 100 % avant des'effacer progressivement. Tout cela doit se passer en moinsde 
1 seconde. 
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Figure 8.2 

Cette representation synchronique montre a gauche 
le debut de I'explosion de points puis chacun des 
stades de I'animation de gauche a droite. 



100 100 100 1001 0( 



Definition de la classe 

Pour une classe si petite, il nous faut tout de meme quatre instructions import. Nous utiliserons le 
minuteur pour controler I'animation de I'explosion de points, bien qu'une autre option eut ete d'en 
faire une animation temporelle en utilisant des evenements enter_frame : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. text.*; 
import flash. utils. Timer; 

Bien que la classe PointBurst realise I'animation, il s'agit toujours d'un sprite, parce qu'elle ne 
requiert pas plusieurs images. Au lieu de cela, nous allons mettre a I'echelle et definir la propriete 
alpha du sprite a chaque etape. 

Nous utiliserons des constantes statistiques pour determiner le type de police, sa taille et sa couleur : 

public class PointBurst extends sprite { 
// Style de texte 

static const fontFace:String = "Arial"; 
static const fontSize:int = 20; 
static const fontBold: Boolean = true; 
static const f ontColor: Number = OxFFFFFF; 

Nousavonsaussi plusi eursconstantesassocieesa I 'animation. animstepsetanimstepTimedeterminent 
la dureeet la fluiditede I' animation. Par exemple, avec dix etapes et 50 millisecondes entre les etapes, 
nous obtenons une animation de 500 millisecondes. C'est encore le cas avec vingt etapes de 
25 millisecondes, mais nous avons dans ce cas deux fois plus d'etapes et done une animation plus tluide : 

// Animation 

static const animSteps:int = 10; 
static const animStepTime:int = 50; 

L'echelle de I'animation change durant I'animation. Les deux constantes suivantes definissent les 
points de depart et de fin du changement d'echelle : 



static const startScale: Number = 0; 
static const endScale: Number = 2.0; 
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Apres les constantes viennent plusieurs variables qui contiennent des references aux elements dans 
I' explosion de points. L'une contient le champ texte et une autre, le sprite qui encapsulera le champ 
texte. U netroisi erne contient une reference a la scene ou au clip ou nous souhaitons placer I'explosion 
de points. La derniere variable contient une reference a I'objet Timer : 

private var tField:TextField; 
private var burstSprite:Sprite; 
private var parentMC:MovieClip; 
private var animTimer: Timer; 

La fonction PointBurst 

La ligne de code que nous utilisons pour creer un PointBurst (explosion de points) sert a creer un 
nouvel objet PointBurst. Cette operation appellea son tour la fonction PointBurst, qui acceptedes 
parametres. Ces parametres sont notre seul moyen de communiquer a I'objet PointBurst des 
informations des telles que r emplacement de I'explosion de points et le texte a afficher. 



Le parametre pts est un object car nous souhaitons pouvoir accepter n'importequel type de 
variable : int, Number ou string. Nous converti rons cela par la suite en string, car c'est ce 
que requiert la propriete text du TextFieid. 

Le premier parametre de PointBurst estun clip, mc. II s'agirad'une referenced la scene ou a un autre 
clip ou un sprite auquel I'explosion de points sera ajouteeavec addcniid : 

public function PointBurst(mc:MovieClip, pts:Object, x,y:Number) { 

La premiere chose que la fonction doit fai re est de creer un objet Text Format a attribuer au TextFieid 
que nous allons creer par la suite. Nous uti I iserons pour cela des constantes demise en forme que nous 
aurons definies anterieurement. La fonction devra aussi definir I'alignement du champ en choisissant 

center : 

// Creation du format de texte 

var tFormat:TextFormat = new TextFormat( ) ; 

tFormat.font = fontFace; 

tFormat.size = fontSize; 

tFormat.bold = fontBold; 

tFormat. color = fontcolor; 

tFormat. align = "center"; 
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Ensuite, nous creons le TextFieid lui-meme. En plus de positionner selectable a false, nous 
devons demander au champ d'utiliser des polices incorporees au lieu de polices systeme. Nous 
souhaitonsen effet definir la transparence du texte, cequi nepeutetre realise que si I etexte utilise des 
polices incorporees. 

Pour centrer le texte dans le sprite que nous allons creer ensuite, nous positionnons la propriete 
autosize du champ a TextFieidAutoSize. center. Ensuite, nous positionnons les proprietes x et y a 
I'inversede la moitiede la largeur et de la hauteur. Cela place I e centre du texte au point 0,0 : 

// Creer le champ texte 

tField = new TextFieldO; 

tField.embedFonts = true; 

tField. selectable = false; 

tField. def aultTextFormat = tFornat; 

tField. autoSize = TextFieidAutoSize. CENTER; 

tField. text = String(pts); 

tField. x = -(tField. width/2); 

tField. y = - (tField. height/2) ; 

Nous creons maintenant un sprite pour contenir le texte et agir comme objet d'affichage principal 
pour I'animation. Nous definissons I' emplacement de ce sprite en lui attri buant les valeurs x et y 
passees dans la fonction. Nous definissons I'echelledu sprite en lui attri buant la constantestartscaie. 
Nous fixons la propriete alpha a zero. Ensuite, nous ajoutonsle sprite au clip mc, c'est-a-direau sprite 
passe dans la fonction : 

// Creation du sprite 
burstSprite = new Sprite(); 
burstSprite.x = x; 
burstSprite. y = y; 
burstSprite. scaleX = startScale; 
burstSprite. scaleY = startScale; 
burstSprite. alpha = 0; 
burstSprite . addChild (tField ) ; 
parentMC = mc; 

parentMC.addChild(burstSprite) ; 

M aintenant que I'objet PointBurst s'est manifeste comme sprite, nous devons simplement demarrer 
un minuteur pour lancer I'animation au cours des 500 prochaines millisecondes. Ce minuteur appelle 
rescaieBurst plusieurs fois, puis appelle removeBurst une fois que c'est fini : 

// Demarrer I'animation 

animTimer = new Timer ( animStepTime, animSteps ) ; 
animTimer.addEventListener(TimerEvent. TIMER, rescaieBurst) ; 
animTimer. addEvent Listener (TimerEvent .TIMER_COMPLETE, removeBurst) ; 
animTimer. start ( ) ; 
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Animer I'explosion de points 

Lorsque le Timer appelle rescaieBurst, nous devons definir les proprietes d'echelle et I'alpha du 
sprite. Pour commencer, nous calculons percentDone en fonction du nombre d'etapes de Timer qui 
se sont ecoulees et du nombre total d'etapes animsteps. Ensuite, nous appliquons cette valeur aux 
constantes startscaieetendscaie pour obtenirl'echel I eactuelle. Nous pouvonsuti I iser percentDone 
pour definir la propriete alpha, mais nous souhaitons inverser la valeur afin d'aller de 1 .0 a 0.0. 



La propriete alpha definit la transparence d'un sprite ou d'un clip, k 1.0, 1'objet se com- 
porte normalement, les couleurs unies etant a 100 % d'opacite. Cela si g n i fie cependant 
que les zones non rempjies, comme eel I es en dehors de la forme des caracteres, sont quant 
a el les transparentes. A .5 ou 50 % de transparence, les zones ha bituel I ement opaques 
comme les contours et les remplissages des caracteres partagent les pixels avec les cou- 
leurs sous-jacentes. 



// Animer 

public function rescaleBurst(event:TimerEvent) { 
// A quel point en sommes-nous ? 

var percentDone: Number = event. target. currentCount/animSteps; 
// Definir echelle et alpha 

burstSprite.scaleX = (1 .0-percentDone)*startScale + percentDone*endScale; 
burstSprite.scaleY = (1 .0-percentDone)*startScale + percentDone*endScale; 
burstSprite. alpha = 1 .0-percentDone; 

} 

LorsqueleTimer afini, il appelle removeBurst.Cettefonctions'occupede tout pour que lePointBurst 
se debarrasse lui-meme, sans aucune action de la part de I'animation principale ou de la classe de 
I 'animation. 

Unefois que le champ texte tFieid est supprime du sprite burstSprite, burstSprite est supprime 
de parentMC. Ensuite, les deux sont positionnes a nun afin de les nettoyer de la memoire. Pour finir, 
la commande delete est utilisee pour faire completement disparaitre I'objet PointBurst. 



On ne peut pas dire avec certitude que toutes les lignes de removeBurst sont necessaires. 
Normalement, vous etes cense effacer toutes les references a un objet pour le supprimer, 
mais I'instruction delete supprime le PointBurst, qui a son tour doit supprimer les deux 
variables egalement. La suppression de burstSprite peut aussi permettre de supprimer 
tFieid. II n'existe pas de moyen de le tester et, a I'heure ou ces lignes sont ecrites, il ne 
semble pas exister de document technique qui indique ce que le lecteur F lash fait specifi- 
quement dans ce cas. II est done preferable d'utiliser une fonction qui s'assure que tout est 
correctement supprime. 
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// Termine, se suppriner 

public function removeBurst(event:TimerEvent) { 
burstSprite . removeChild (t Field ) ; 
parentMC.renoveChild(burstSprite) ; 
tField = null; 
burstSprite = null; 
delete this; 



Utiliser PointBurst dans une animation 

Vousaurez besoin dedeux chosesavantdecreerun nouvel objet PointBurst dans une animation. La 
premiere est decreer une nouvellepolicedans la bibliothequedel'animation. Lasecondeestd'indiquer 
a Flash ou trouver votre fichier PointBurst.as. 

Ajouter une police a une animation 

II faut une police parce que nous utilisons la propriete alpha pour la transparence du texteet cela ne 
peut se faire qu'avec une police incorporee dans la bibliotheque. 

Pour creer une police incorporee, vous devez utiliser le menu deroulant du panneau Bibliotheque et 
choisir Nouvel I e police. Ensuite, selectionnez la police souhai tee et nommez-la. Le nom de I' element 
dans la bibliotheque n'importe pas vraiment. J 'utilise general ement I e nom de la police, commeArial 
dans cet exemple. La Figure 8.3 presente la boite de dialogue Proprietes des symbol es de police. 



II ne s'agit la que d'une etape. L'etape numero deux, qui n'a rien d'evident, consiste a s'assurer que 
cette police est incl use pour qu'A ctionScri pt puisse I ' utiliser. Pour cela, selectionnez la police dans la 
bibliotheque, puis cliquez du bouton droit ou cliquez avec la touche Ctrl enfoncee sur Mac et 
selectionnez I'option Liaison pourfaireapparaitrela boite dedialogue Proprietes de liaison presentee 
a la Figure 8.4. 



Figure 8.3 

La boite de dialogue Proprietes des 
symboles de police vous permet de 
choisir une police a ajouter a la 
bibliotheque. 




A la difference des autres types de symboles, les options de liaisons n'apparaissent pas dans 
la boite de dialogue Proprietes generales du symbole. E I les ne s'affichent que dans la boite 
de dialogue Proprietes de liaison. 
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F igure 8.4 

La boite de dialogue P roprietes 
de liaison vous permetde specifier 
une classe pour la police dans la 
bibliotheque. 



Proprietes de liaison 



Identifiant : | 
Classe : SSI 



Classe de base : flash.text.Font 

Liaison : [V] Exporter pour AcbonScript 

! ! Exporter pour le partage a I'exeojtion 

b/J Exporter dans la premiere image 

O Importer pour le partage a I'exeajtjon 



Le nom de classe attribue a la police n'importe pas. Vous pouvez en outre ignorer la boite de dialogue 
qui vous indiquequ'aucune definition de classe n'esttrouvee. II n'en fautaucune. 

Emplacements des classes 

Pour nosexemples, nous n'aurons rien afaire pour indiquer a Flash ou rechercher le fichier de classe 
PointBurst.as, carcelui-ci setrouveau meme emplacement que I'animation Flash. 

En revanche, si voussouhaitez utiliser le meme fichier declasse PointBurstasdans plusieurs projets, 
vous devez le placer a un endroit auquel peuvent acceder toutes les animations et leur indiquer a 
chacuneou letrouver. 

II existedeux moyens de proceder. Le premier consiste a aj outer un chemin de classe aux preferences 
de Flash. II se peut que vous souhaitiez creer un dossier pour contenir toutes les classes que vous 
utilisez regulierement. Ensuite, accedez a la section A ctionScript des Preferences Flash. Cliquez sur 
le bouton Parametres A ctionScript 3.0 etajoutez un dossier a Tempi acement que consulte Flash pour 
les fichiers declasse. 



vous pouvez aussi utiliser tout simplement r emplacement par defaut pour les classes de 
bibliotheque, soit le dossier Classes, qui se trouve dans le dossier F lash du dossier Program 
Files ou Applications. Pour ma part, j'evite cette approche car je m'efforce de conserver tous 
les documents queje cree en dehors du dossier Applications, afin de n'y conserver que I'ins- 
tallation par defaut de mes applications. 



L'autre methode pour indiquer a une animation ou trouver un fichier de classe qui ne se trouve pas 
dans le meme repertoire que I'animation consiste a choisir Fichier > Parametres de publication, puis 
a cliquer sur le bouton Parametres a cote de la selection de la version A ctionScript. Vous pourrez alors 
ajouterun nouveau chemin declasse pour cette seule animation. 
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En resume, il existequatre moyens pour une animation Flash d'acceder a un fichier de classe : 

1. Placer le fichier declasse dans le meme dossier que I'animation. 

2. Ajouter I'emplacement de classe dans les preferences de Flash. 

3. Placer le fichier de classe dans le dossier Classes de I'appl ication Flash. 

4. Ajouter I'emplacement de la classe dans les Parametres de publication de I'animation. 

Creer une explosion de points 

Une fois que la police se trouve dans la bibliotheque et que I'animation a acces a la classe, il suffit 
d'une ligne pour creer une explosion de points. Voici un exemple : 

var pb: PointBurst = new PointBurst(this, 100,50,75) ; 

Cecodecreeuneexplosiondepointsqui affichelenombrelOO.L'explosionseproduitauxcoordonnees 

50,75. 

L'animation d'exemple PointBurstExample.fla et sa classe PointBurstExamplaascorrespondante 

presentent un exemple legerement plus evolue. II cree une explosion de points partout ou vous 
cliquez : 

package { 

import flash. display.*; 

import flash. events.*; 

public class PointBurstExample extends MovieClip { 

public function PointBurstExample () { 

stage. addEventListener(MouseEvent. CLICK, tryPointBurst) ; 

} 

public function tryPointBurst(event:MouseEvent) { 

var pb:PointBurst = new PointBurst(this,100,nouseX,nouseY) ; 

} 

} 

} 

M aintenant que nous disposons d'un fragment de code independant qui s'occupe de cet effet special 
assez complexe, nous pouvons passer a notre jeu suivant en sachant qu'il pourra inclure I 'explosion 
de points en ne levant presque pas le petit doigt pour programmer. 
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Match Three 



Codes sources 
^it>c http://flashgameu.com 

A3G PU08_M atchThreazip 



Si M atch Three est le casual game le plus courant et le plus populaire, il ne Test pas devenu parce 
qu'il est facile a programmer. En real ite, bien des aspects de ce jeu requierent des techniques assez 
sophistiquees. Nous al Ions egalement examiner cejeu element par element. 

Jouer a Match Three 

Si vous etes parvenu a ne pas jouer a des jeux M atch Three au cours des quelques dernieres annees, 
voici leprincipedujeu. 

U ne grille de huit par huit contient une disposition aleatoire de six ou sept pieces de jeu. Vous pouvez 
cliquer sur n'importe quelle paire de pieces adjacentes pour tenter de les permuter. Si la permutation 
produit un alignement horizontal ou vertical detrois pieces identiquesou plus, el le est auto ri see. Les 
pieces qui s'alignent sont supprimees et eel les qui se trouvent au-dessus tombent dans I 'emplacement 
libere. Denouvelles pieces viennentdu haut afin deremplir letrou laisse par la disparition des pieces 
alignees. 

Voila tout. C'est cette simplicity du jeu qui le rend si populaire. Lejeu se poursuit jusqu'a ce que la 
grille parvienne a un etatou aucune permutation n'est plus possible. 

La Figure 8.5 presente mon jeu Newton's Nightmare, un jeu M atch Three plutot classique. 



Figure 8.5 

Lejeu Newton's Nightmare 
utilise des pommes pour ce 
jeu de M atch Three. 
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Le jeu Bej eweled, aussi appele D iamond 
Three. 



ine, est repute avoir lance la fureur du M atch 



Vue d'ensemble des fonctionnalites du jeu 

La sequence d'evenement dans le jeu suit douze etapes. Chaque etape presente un defi different en 
termes de programmation. 

1. Creer une grille aleatoire 

U ne grille de huit par huit avec une disposition aleatoire de sept elements differents est creee au debut 
du jeu. 

2. Verifier les correspondances 

II existe quelques restrictions concernant ce que la grille de depart peut contenir. La premiere tient a 
ce qu'elle ne peut inclure de lignes avec des alignements de trois elements. II faut que lejoueur lui- 
meme trouve la premiere correspondance permettant de creer un alignement. 

3. Verifier les emplacements 

La seconde restriction pour la grille initiale tient a ce qu'il doit exister au moins un deplacement 
valide. A utrement dit, lejoueur doit pouvoir permuter deux elements et obtenir une correspondance. 

4. Le joueur selectionne deux pieces 

Les pieces doivent etre adjacentes Tune a I'autre horizontalement ou vertical ement et la permutation 
doit produire une correspondance. 

5. Les pieces sont permutees 

En general, une animation montrelesdeux pieces qui sedeplacent afin d'occuperleurs emplacements 
respectifs. 

6. Rechercher des correspondances 

Une fois qu'une permutation est effectuee, il faut examiner la grille a la recherche de nouvelles 
correspondances pour les alignements horizontaux et verticaux. Si aucune correspondance n'est 
trouvee, la permutation doit etre annulee. 
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7. Attribuer des points 

Si une correspondence est trouvee, des points doivent etre attribues. 

8. Supprimer les correspondances 

Les pieces impliquees dans une correspondance doivent etre supprimees de la grille. 

9. Faire tomber les pieces du dessus 

Les pieces situees au-dessus de eel les qui ont ete supprimees doivent tomber pour remplir I'espace 
laisse vide. 

10. Ajouter de nouvelles pieces 

De nouvelles pieces doivent tomber du haut de la grille afin de remplir les espaces vacants. 

11. Rechercher des correspondances de nouveau 

Une fois que toutes les pieces sont tombees et que de nouvelles sont venues remplir les trous, il 
convient de rechercher de nouvelles correspondances. Retour a I'etape 6. 

12. Verifier si d'autres deplacements sont possibles 

Avantderedonnerlecontroleaujoueur, uneverification estopereeafin devoirsi d'autresdeplacements 
sont possibles. Si cen'estpaslecas, la parti e est termi nee. 

L'animation et la classe MatchThree 

L'animation MatchThree.fla est assez simple. Hormis la policeArial dans la bi bl i otheque, les seuls 
elements lies au jeu sont un clip pour les pieces du jeu et un autre clip qui agit comme indicateur de 
selection. 

La Figure 8.6 presente le clip Piece. Celui-ci contient sept images, chacune abritant une piece 
differente. Le clip de selection se trouve egalement sur le caique superieur et s'etend sur les sept 
images. II peut etre active ou desactivea I'aidedela propriete visible. 

Examinons les definitions de classe avant de passer a la logique du jeu. Bizarrement, il n'y a pas 
autantde definitions que Ton pourraiten attendre. Seules les instructions import les pluselementaires 
sont requises : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. text.*; 

import flash. utils. Timer; 
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Figure 8.6 

Le clip Pi ece con ti en t sept 
variantes et un cadre de selection. 
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En cequi concernelesconstantes, nousn'en utilisonsqu'une pour lenombrede variantes de Piece et 
trois pour la disposition de I'affichage a I'ecran : 

public class MatchThree extends MovieClip { 
// Constantes 

static const numPieces:uint = 7; 
static const spacing: Number = 45; 
static const offsetX: Number = 120; 
static const offsetY: Number = 30; 

L'etat du jeu sera stocke dans cinq variables differentes. La premiere, grid, contient des references a 
touslesobjets Piece. II s'agiten fait d'un tableau detableaux.Chaqueelement dans la grillecorrespond 
ainsi en realite a un autre tableau contenant huit references au clip Piece. II s'agit done d'un tableau 
imbrique de huit par huit. Nouspouvonsdes lorsexaminer chaqueobjet Piece en uti I i sant si m pi ement 

grid[x] [y]. 

gameSprite est un sprite destine a contenir tous les sprites et les clips que nous al Ions creer, ce qui 
permet de les separer de tous les autres graphismes deja sur la scene. 

La variable firstPiece contient une reference au premier objet Piece sur lequel le joueur clique, 
commepour lejeu de M emory du Chapitre 3. 
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Les deux variables booleennes isDropping et isSwapping indiquent si des objets Piece sont en cours 
d'animation sur le moment. La variable gameScore contient le score du joueur : 

/ / Grille et mode du j eu 

private var grid:Array; 

private var gameSprite: Sprite; 

private var firstPiece:Piece; 

private var isDropping, isSwapping:Boolean; 

private var gameScore :int; 

Configurer la grille 

Les premieres fonctions definiront les variables du jeu, notamment en configurant la grille du jeu. 
Definir les variables du jeu 

Pour commencer la partie, nous devons definir toutes les variables d'etat du jeu. N ous commencerons 
par creer le tableau de tableaux grid. Ensuite, nousappellerons setupGrid pour le remplir. 

II n'est pas necessaire de remplir les tableaux Internes de grid par des emplacements vides. Le 
si mplefaitde definir une position dansun tableau cree 1'emplacennent correspondant et remplit 
tous les emplacements precedents avec la valeur undefined. Par exemple, si un nouveau tableau 
est cree puis que I 'element 3 se voie attribuer la valeur "My string", le tableau possede la lon- 
gueur 3 et les elements 0 et 1 possedent la valeur undefined. 



Nous definissons ensuite les variables isDropping, isSwapping et gameScore. Nous configurons en 
outre un ecouteur enter_frame pour dinger les mouvements dans le jeu : 

// Configurer la grille et debut de la partie 
public function startMatchThree( ) { 

// Creer le tableau grid 

grid = new Array ( ) ; 

for(var gridrows:int=0;gridrows<8;gridrows++) { 
grid.push(new ArrayO); 

} 

setUpGrid ( ) ; 
isDropping = false; 
isSwapping = false; 
gameScore = 0; 

addEventListener ( Event .ENTER_FRAME,movePieces) ; 

} 
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Configuration de la grille 

Pour configurer la grille, nous commencons par unebouclesansfin en uti I isant I ' instruction while (true). 
Ensuite, nous creons les elements dans la grille. Nous prevoyons que la premiere tentative creera une 
grille valide. 

Un nouveau gamesprite est cree pour contenir les clips pour les pieces dujeu. Ensuite, soixante-quatre 
objets Piece aleatoires sont crees avec la fonction addPiece. Nous examinerons cette fonction ensuite 
mais, pour I'instant, sachez qu'elle ajoute un objet Piece au tableau grid ainsi qu'au gamesprite : 

public function setUpGrid() { 

// Boucler jusqu'a ce que la grille de depart soit valide 
while (true) { 

// Creer sprite 
ganeSprite = new Sprite(); 

// Ajouter 64 pieces aleatoires 
for(var col:int=0;col<8;col++) { 
for(var row:int=0;row<8;row++) { 
addPiece(col,row) ; 

} 

} 

Ensuite, nous devons verifier deux choses pour determiner si la grille creee est un point de depart 
valide. La fonction lookForMatches retourne un tableau des correspondances trouvees. Nous 
I'examinerons plus loin dans ce chapitre. A ce stade, el I e doit retourner zero, ce qui signifie qu'il n'y 
a pas de correspondance a I'ecran. U ne commande continue ignore le reste de la boucle while et 
recommence en creant une nouvelle grille. 

Apres cela, nous appelons lookForPossibies, qui verifie s'il existe des correspondances possibles 
suite a une permutation. Si la fonction retourne false, il ne s'agit pas d'un bon point de depart parce 
quelejeu estdejatermine. 

Si aucune de ces conditions n'est remplie, la commande break permet au programme de quitter la 
boucle while. Ensuite, nous ajoutons le gamesprite a la scene : 

// Essayer a nouveau si des correspondances sont presentes 
if (lookForMatches ( ) .length != 0) continue; 

// Essayer a nouveau si aucun deplacement possible 
if (lookForPossibles( ) == false) continue; 

// Aucune correspondance, mais des coups sont possibles : la grille est OK 
break; 

} 

// Ajouter le sprite 
addChild(gameSprite) ; 

} 
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Ajouter les pieces du jeu 

La fonction addPiece cree un objet Piece aleatoire a un emplacement de colonne et de ligne defini. 
Elle cree le clip et definit son emplacement : 

// Creer une piece aleatoire, ajouter au sprite et a la grille 
public function addPiece(col,row:int) :Piece { 

var newPiece: Piece = new Piece(); 

newPiece.x = col*spacing+of f setX; 

newPiece. y = row*spacing+of f setY; 

Chaque Piece doit tenir le registre de son propre emplacement sur la grille. Deux proprietes 
dynamiques appelees coi et row sont definies a cet effet. En outre, type contient le nombre 
correspondant au type de I'objet Piece, qui correspond a I'image du clip qui est affichee : 

newPiece. col = col; 
newPiece. row = row; 

newPiece. type = Math.ceil(Math. random( )*7) ; 
newPiece . gotoAndStop ( newPiece . type ) ; 

Le clip select a I'interieur du clip Piece correspond au contour qui apparait lorsque I'utilisateur 
clique sur une piece. Nous le definirons de maniere qu'il ne soit pas visible au depart. Ensuite, la 

Piece est ajoutee au sprite gameSprite. 

Pour placer la Piece dans le tableau grid, nous utilisons I'adressagedes tableaux imbriques a I'aide 

des doubles Crochets : grid[col] [row] = newPiece. 

Chaque Piece se voit attribuer son propre ecouteur de die. Ensuite, la reference a I'objet Piece est 
retournee. Nous I'utiliserons non pas dans la fonction setupGrid precedente mais plus tard lorsde la 
creation de nouveaux objets Piece servant a remplacer ceux qui ont ete supprimes suite a une 
correspondance : 

newPiece. select. visible = false; 
gameSprite. addChild(newPiece) ; 
grid[col] [ row] = newPiece; 

newPiece . addEvent Listener (MouseEvent . CLICK, clickPiece) ; 
return newPiece; 

} 

La Figure 8.7 presente une grille valide aleatoire terminee. 

Interaction du joueur 

Lorsque le joueur clique sur un objet Piece, I'action resultante depend du fait qu'il s'agit de la 
premiere piece sur laquelle il clique ou de la seconde. S'il s'agit de la premiere, I'objet Piece est 
selectionne et rien d' autre ne se passe. 
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Figure 8.7 

Voici 1'une des grilles de jeu 
aleatoires possibles. 



I MatchThree.swf 



I Fichier Affichage Controle Deboguer 



Si le joueur clique deux fois sur le meme objet Piece, celui-ci est deselectionne et le joueur revient a 
la case depart : 

// Le joueur clique sur une piece 
public function clickPiece( event :MouseEvent) { 
var piece:Piece = Piece(event.currentTarget) ; 

// La premiere est selectionnee 
if (firstPiece == null) { 

piece. select. visible = true; 

firstPiece = piece; 

// Le joueur a clique de nouveau sur la premiere 
} else if (firstPiece == piece) { 

piece. select. visible = false; 

firstPiece = null; 

Si lejoueur a clique sur undeuxieme objet Piece, nousdevonsdeterminers'il peuty avoir une permutation. 
Pour commencer, nous desactivons la miseen surbril lance de la selection sur le premier objet Piece. 

Le premier test consiste a determiner si les deux objets Piece setrouvent sur la meme ligne, puiss'ils 
se trouvent cote a cote. Sinon les objets Piece peuvent etre dans la meme colonne et I'un au-dessus 
del 'autre. 

Dans les deux cas, nous appelons makeSwap. Cette fonction s'occupede verifier si la permutation est 
valide- autrement dit, si elleproduira un alignement. Quecesoit lecasou non, la variable firstPiece 
est positionnee a nun afin de se preparer a la prochaine selection du joueur. 
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Si le joueur a selectionneun objet Piece qui setrouvetrop eloignedu premier, nous supposons que le 
joueur souhaite abandonner sa premiere selection et commencons a selectionner une seconde paire : 

// Le joueur a clique sur la seconde piece 
} else { 

firstPiece. select, visible = false; 

// Meme ligne, une colonne apres 
if (firstPiece. row == piece. row) { 

if (Math. abs(firstPiece. col-piece. col) == 1 ) { 

makeSwap (firstPiece , piece ) ; 

firstPiece = null; 

} 

// Meme colonne, une ligne apres 

} else if (firstPiece. col == piece. col) { 

if (Math. abs(firstPiece. row-piece. row) == 1 ) { 

makeSwap (firstPiece , piece ) ; 

firstPiece = null; 

} 

// Mauvais emplacement, reselection de la premiere piece 
} else { 

firstPiece = piece; 

firstPiece. select. visible = true; 

} 



} 



} 



Lafonction makeSwap permute I es deux objetspiece puis verifie si unecorrespondanceestdisponible. 
Si cen'est pas lecas, ellerepermute les objets Piece. Sinon la variable isSwapping est positionnee a 
true afin que I'animation puisse s'executer : 

// Lancer la permutation animee des deux pieces 
public function makeSwap(piece1 ,piece2: Piece) { 
swapPieces(piece1 ,piece2) ; 

// Verifier si le deplacement a produit un alignement 
if (lookForMatches( ) .length == 0) { 

swapPieces(piece1 ,piece2) ; 
} else { 

isSwapping = true; 

} 

} 

Pour effectuer la permutation effective, nous devons stacker I' emplacement de la premiere Piece dans 
une variable temporai re. Ensuite, nous definirons I' emplacement de la premiere Piece en lui attri buant 
celui de la seconde. La Figure 8.8 presente un diagramme du fonctionnement de la permutation. 
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Figure 8.8 

Lors de la permutation de deux 
valeurs, il estnecessairedecreer 
une variable temporaire pour stacker 
une valeur au cours de I'echange. 
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Unefois les emplacements des objets Piece echanges, la grille doit etre misea jour. Commechaque 
Piece possede maintenant les valeurs row et coi appropriees, nous configurons simplement la grille 
de maniere a ponter sur chaque Piece au bon emplacement dans la grille : 

// Permuter les deux pieces 

public function swapPieces(piece1 ,piece2:Piece) { 
// Permuter les valeurs row et col 
var tenpCol:uint = piecel.col; 
var tenpRow:uint = piecel.row; 
piecel.col = piece2.col; 
piecel.row = piece2.row; 
piece2.col = tempCol; 
piece2.row = tempRow; 

// Permuter les positions dans grid 
grid[piece1 .col] [piecel . row] = piecel; 
grid[piece2.col] [piece2. row] = piece2; 

} 

La permutation estcompletement reversible, cequi est important car elledevra souventetreinversee. 
Nousne savons si la permutation produitun alignement concordant qu'apresqu'ellese trouve real isee. 
Nous aurons ainsi souvent besoin de permuter les objets Piece, de verifier s'il existe un alignement, 
puis de reprendre la permutation si aucun alignement n'est trouve. 

Animer le mouvement des pieces 

Nous allons utiliser une methode interessante mais pas evidente pour I'animation du mouvement des 
pieces. Chaque objet Piece connait la ligne (row) et la colonne (coi) dans laquelle il se trouve parce 
qu'il possedeuneproprieterowetuneproprietecoidynamiques. II connaitegalementson emplacement 
a I'ecran grace a ses proprietes x et y. 
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Ces deux positions doivent se correspondre avec I'aide des variables spacing, off setx et off setY. 
Une Piece dans la colonne3 doit ainsi setrouver a la position x = 3*spacing+offsetx. 

Que se passe-t-il cependant si une Piece se deplace vers une nouvelle colonne? Si nous fixons la 
valeur de coi d'une Piece a 4, el le devrait etre a 4*spacing+offsetx, qui est situee spacing (45) 
pixels vers la droite. Dans le cas present, nous demandons a la Piece de se deplacer un peu vers la 
droite, afin de se rapprocher de son nouvel emplacement. Si nous procedons ainsi a chaque image, la 
Piece parviendra a terme a sa nouvelle destination et cessera de bouger (car el I e possedera une valeur 
coi et une valeur x qui se correspondent). 

Cette technique nous permetd'animern'importe quel objetPiece pendant qu'il se deplace vers son nouvel 
emplacement. Nousn'avons memepasbesoin de configurer cette animation piece par piece : il nous suffit 
de changer la propriete coi ou row d'une Piece pour que la fonction suivante s'occupe du reste. 

La fonction movePieces est appelee a chaque evenement enter_frame car nous I'avons configuree 
avec un ecouteur au debut de la classe. Elle parcourt en boucle toutes les pieces et verifie toutes les 
valeurs coi et row afin devoir si les valeurs x et y doivent etre ajustees pour y correspondre. 



Nous uti I i sons une distance de 5 a chaque image dans movePieces. Pour que coi et row s'ali- 
gnent sur les valeurs xety.il est imperatif de s'en tenir a des multiples de 5 pour spacing. 
Dans I'animation d'exemple, spacing vaut 45 et cela fonctionne. Si vous deviez changer la 
valeur de spacing, par exemple en choisissant 48, vous devriez egalement choisir une nou- 
velle quantite de mouvementdont48 soltun multiple, comme4, 6 ou 8. 



public function movePieces (event: Event) { 

var madeMove: Boolean = false; 
for(var row:int=0;row<8;row++) { 
for(var col:int=0;col<8;col++) { 
if (grid[col] [row] != null) { 

// Deplacement vers le bas 
if (grid[col] [row] .y < 

grid[col] [row] . row*spacing+of f setY) { 

grid[col] [row] .y += 5; 

madeMove = true; 

// Deplacement vers le haut 
} else if (grid[col] [row] .y > 

grid[col] [row] . row*spacing+of f setY) { 

grid[col] [row] .y -= 5; 

madeMove = true; 



// Deplacement vers la droite 
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} else if (grid[col] [row] .x < 

grid[col] [row] . col*spacing+off setX) { 
grid[col] [row] .x += 5; 
madeMove = true; 

// Deplacement vers la gauche 
} else if (grid[col] [row] .x > 

grid[col] [row] . col*spacing+off setX) { 

grid[col] [row] .x -= 5; 

madeMove = true; 

} 

} 

} 

} 

Au debut de movePieces, nous positionnons la variable booleenne madeMove a false. Ensuite, 
lorsqu'une animation est requise, nous la positionnons a true. En d'autres termes, si movePieces ne 
fait rien, madeMove vaut false. 

Ensuite, cettevaleur est compares aux propri&es isDropping et isSwapping de la classe. Si isDropping 
vaut true et madeMove vaut false, cela signifie que toutes les pieces qui tombaient ont atterri. II est 
temps de rechercher d'autres correspondances. 

En outre, si isSwapping vaut true et madeMove vaut false, cela signifie que deux pieces viennent juste 
determiner leur permutation. Danscecas, il est egalement temps de rechercher des correspondances: 

// Si la chute des pieces est terminee 
if (isDropping && ImadeMove) { 

isDropping = false; 

findAndRemoveMatches ( ) ; 

// Si la permutation est terminee 
} else if (isSwapping && ImadeMove) { 

isSwapping = false; 

findAndRemoveMatches ( ) ; 

} 

} 

Trouver des correspondances 

Deux parties du programme M atch Three posent un veritable defi. La premiere est celle qui consiste 
a trouver des correspondances dans la grille. II s'agit, comme nous I'avons vu au Chapitre 1, d'un 
excellent exemple de la technique de programmation qui consiste a decomposer le probleme en 
problemes plus petits. L'operation qui consiste a trouver des correspondances de trois pieces 
consecutives ou plus dans la meme grille n'a rien de trivial. E I le ne peut etre resolue en une simple 
etape. II nefautdonc pas considerer qu'il s'agissed'un unique probleme a resoudre. 
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Decomposer la tache en etapes plus petites 

Nous devons au lieu de cela decomposer cette tache en problemes plus petits et poursuivre cette decom- 
position jusqu' a ce que les problemes deviennent suffisamment simples pour etre facilement resolus. 

findAndRemovewiatches commence done par decomposer la tache en deux etapes : trouver des 
correspondances et les supprimer. La suppression des pieces est en fait plutot simple. Elle implique 
simplement de supprimer les objets Piece du gameSprite, de positionner I'emplacement de grid 
correspondant a nun et d'attribuer des points au joueur. 



Le nombre de points attri bues depend du nombre de pieces consecutives alignees. Trois 
pieces donnent (3-i>*5@ ou 100 points par piece pour un total de 300 points. Quatre pieces 
donnent (4-i)*se soit 150 points par piece pour un total de 600 points. 



L'absence de certaines Piece implique cependant que eel I es au-dessus devront se voir indiquer 
qu'elles sont suspendues dans les airs et doivent tomber. Cette tache n'est pas triviale non plus. 

Nous avons done deux taches non triviales a gerer : rechercher des correspondances et indiquer aux 
pieces au-dessus de eel I es supprimees qu'elles doivent tomber. Nous deleguons ces deux taches a 
d'autres fonctions: lookForMatches et affectAbove. Nous real iserons les autres taches simples 
directement ici dans la fonction findAndRemoveMatches. 

La fonction findAndRemoveMatches 

Nous parcourons en boucle les correspondances trouvees et les placons dans le tableau matches. 
Ensuite, nous attri buons des points pour chaque correspondance puis nous parcourons tous les objets 
Piece a supprimer et les supprimons. 




La technique qui consiste a deleguer des taches difficiles a de nouvelles fonctions que vous 
n'avez pas encore creees est appelee programmation de haut en bas. Au lieu de se soucier de 
la maniere de trouver des correspondances, nous considerons simplement une fonction ioo- 
kForMatches qui s'occupera de cette tache. Nous construisons le programme de haut en bas, 
en s'occupant d'abord des considerations d'ordre general et en se souciant ensuite des fonc- 
tions qui s'occupent des points de detail. 



// Recuperer les correspondances et les supprimer, attribuer les points 
public function findAndRenoveMatches( ) { 

// Obtenir la liste des correspondances 

var matches: Array = lookForMatches( ) ; 

for(var i:int=0;i<matches.length;i++) { 
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var numPoints: Number = (matches[i] .length-1 )*50; 
for(var j :int=0; j<matches[i] .length; j++) { 
if (gameSprite.contains(matches[i] [j ] ) ) { 

var pb = new PointBurst(this, numPoints, matches[i] [j ] .x, matches [i] [j ] .y) ; 

addScore(numPoints) ; 

gameSprite.removeChild (matches [i] []]); 

grid[matches[i] [j ] .col] [matches[i] [j ] .row] = null; 

affectAbove(natches[i] [j ] ) ; 

} 

} 

} 

LafonctionfindAndRemoveMatchesadeuxtachesdeplusarealiser.Toutd'abord,elleappelleaddNewPieces 
pourremplacertouslesobjetsPiecemanquantsdansunecolonne.Ensuite, elleappelleiookForPossibies 
pour s' assurer qu'il existe encore des deplacements possibles. Elle ne doit le faire que si aucune 
correspondance n' est trouvee. C el a ne se produi t que si findAndRemoveMatches a ete appelee apres que 
les nouvelles pieces ont fini de tomber et qu'aucune correspondance n'est trouvee : 

// Ajouter les nouvelles pieces en haut de la grille 
addNewPieces() ; 

// Aucune correspondance trouvee, peut-etre fin de partie ? 
if (matches. length == 0) { 
if ( !lookForPossibles( ) ) { 
endGamef) ; 

} 

} 

} 

La fonction lookForMatches 

Lafonction lookForMatches a toujours une tacheassez gigantesqueagerer. Elle doit creer un tableau 
de toutes les correspondances trouvees. Elle doit retrouver des correspondances horizontales et 
vertical esde plus de deux pieces. E Me le fait en parcouranten boucle les lignes pour commencer, puis 
les colonnes. Elle ne doit verifier que les six premiers emplacements dans chaque ligne et chaque 
colonne, car une correspondance qui commence au septieme emplacement ne peut faire que deux de 
longueur et que le huitieme emplacement n'est suivi d'aucune piece. 

Les fonctions getwiatchHoriz et getMatchvert se chargent de la tache deleguee qui consiste a 
determiner la longueur d'une correspondance a un emplacement donne de la grille. Par exemple, si 
I' emplacement 3,6 correspond a une Piece de type 4, si I'emplacement 4,6 est aussi de type 4, mais 
que 5,6 soit de type 1, 1'appel getMatchHoriz(3,6) doit retourner 2, car I'emplacement 3,6 demarre 
une serie de deux pieces correspondantes. 
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Si une serie est trouvee, nous souhaitons egalement prolonger la boucle de quelques etapes. S'il y a 
un alignementdequatrepiecesidentiquesaux positions 2,1, 2,2, 2,3 et 2,4, nousverifionssimplement 
2,1 et obtenons le resultat 4, puis sautons 2,2 2,3 et 2,4 afin d'examiner directement 2,5. 

A chaque fois que getMatchHoriz ou getwiatchvert retrouvent une correspondance, el les retournent 
un tableau contenant chacun des objets Piece dans la correspondance. Ces tableaux sont ensuite 
ajoutes au tableau matches dans lookForMatches, qui est a son tour retourne au code ayant appele 

lookForMatches : 

//Retourner un tableau de toutes les correspondences trouvees 
public function lookForMatches () : Array { 
var matchList : Array = new Array(); 

// Rechercher les correspondances horizontales 
for (var row: int=0; row<8; row++) { 
for(var col:int=0;col<6;col++) { 

var match:Array = getMatchHoriz(col, row) ; 
if (match. length > 2) { 
matchList. push(natch) ; 
col += match. length -1 ; 

} 

} 

} 

// Rechercher les correspondances verticales 
for(col=0;col<8;col++) { 

for (row=0;row<6;row++) { 

match = getMatchVert(col,row) ; 
if (match. length > 2) { 
matchList. push(match) ; 
row += match. length-1 ; 

} 

} 

} 

return matchList; 

} 

Les fonctions getMatchHoriz et getMatchVert 

L a fonction getMatchHoriz a maintenant une etape special isee a realiser. Avec une colonne et une ligne, 
el I e verifie la Piece suivante afin devoir si son type correspond. Si c'est lecas, elle est ajoutee a un 
tableau. La fonction continue d'avancer horizontalement jusqu'a trouver une Piece qui ne corres- 
pond pas. Ensuite, elle retourne le tableau qu'elle a compile. Ce tableau peut enfindecompteneconte- 
nir qu'uneseule Piece (eel le de la colonne et de la ligne d'origine) si la suivante ne correspond pas. 
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En revanche, si la suivante correspond et celle d'apres aussi, el I e retourne une serie de trois Piece : 

// Rechercher des correspondances horizontales a partir de ce point 
public function getMatchHoriz(col, row) :Array { 
var match:Array = new Array (grid[col] [ row] ) ; 
for(var i:int=1 ;col+i<8;i++) { 

if (grid[col] [row] .type == grid[col+i] [row] .type) { 

match. push ( grid [col+i] [ row] ) ; 
} else { 

return match; 

} 

} 

return match; 

} 

La fonction getwiatchvert est presque identique a la fonction getMatchHoriz, a ceci pres qu'elle 
effectue sa recherche dans les colonnes et non dans les lignes : 

// Rechercher des correspondances verticales a partir de ce point 
public function getMatchVert(col,row) :Array { 
var match:Array = new Array (grid[col] [ row] ) ; 
for(var i: int=1 ; row+i<8; i++) { 

if (grid[col] [row] .type == grid[col] [ row+i] .type) { 

match. push(grid[col] [row+i] ) ; 
} else { 

return match; 

} 

} 

return match; 

} 

La fonction affectAbove 

N ous al Ions conti nuer detravai I ler afin deconstruirepourfindAndRemoveMatches touteslesfonctions 
dont el lea besoin. La suivante est affectAbove. Nous lui passons un objet Piece et attendons d'el le 
qu'elle indique a tous les objets Piece au-dessus qu'ils doivent descendre d'un cran. II s'agit en 
effet d'une Piece qui dit : "Je m'en vais, aussi venez remplir I'espace laisse libre." 

U ne boucle examine dans la colonne les pieces qui se trouvent au-dessus de la piece actuelle. Si la 
piece actuel le est 5,6, el le examine done dans I'ordre 5,5, 5,4, 5,3, 5,2, 5,1 et 5,0. La ligne(row) deces 
pieces est alors incrementee d'une unite. En outre, la Piece indique a grid qu'elle setrouvedans un 
nouvel emplacement. 

Rappelez-vous qu'avec movePieces nous n'avons pas a nous soucier de la maniere dont une Piece 
doit s'animer pour parvenir a un nouvel emplacement. 



Chapitre 8 



Les "casual games" : Match Three 31 7 



II nous suffit de changer les proprieties col ou row pour que la fonction s'en charge par elle-meme : 

// Inviter toutes les pieces au-dessus de celle-ci a descendre d'un cran 
public function affectAbove(piece:Piece) { 

for(var row:int=piece.row-1 ; row>=0; row- - ) { 
if (grid[piece.col] [row] != null) { 
grid[piece.col] [row] .row++; 
grid[piece.col] [row+1 ] = grid[piece.col] [row] ; 
grid[piece.col] [row] = null; 

} 

} 

} 

La fonction addNewPieces 

La prochaine fonction que nous devons creer est addNewPieces. Elle examine chaque colonne, puis 
chaque emplacement de la grille pour chaque colonne et compte le nombre d' emplacements positionnes 
a null. Pour chacun d'entre eux, un nouvel objet Piece est ajoute. Si la valeur coi et row est definie de 
manierea correspondre a sa destination finale, la valeur y est en revanche definie pour correspondre a la 
ligne au-dessus de la ligne superieure, afin qu'elle semble tomber de plus haul En outre, la variable 
booleenne isDropping se voit attribuer la valeur true pour indiquer que I'animation est en cours : 

// S'il manque des pieces dans une colonne, en ajouter pour les faire tomber 
public function addNewPieces ( ) { 
for(var col:int=0;col<8;col++) { 
var missingPieces:int = 0; 
for(var row:int=7;row>=0;row- -) { 
if (grid[col] [row] == null) { 

var newPiece: Piece = addPiece(col, row) ; 

newPiece.y = off setY-spacing-spacing*nissingPieces++; 

isDropping = true; 

} 

} 

} 

} 

Trouver des emplacements possibles 

S'il est complique de trouver des correspondances, il est en revanche plus simple de trouver des 
correspondances possibles. II s'agitcettefois non plusd'alignementsdetroispieces maisdepossibilites 
detelsalignements. 

Lareponsela pi us si mpl e consiste a balayer la grille enti ere en operant toutes les permutations : 0,0avec 
1,0, puis 1,0 avec 2,0, etc. A chaque permutation, on verifie les correspondances. Des qu' une permutation 
conduit a obtenir une correspondance valide, nous cessons la recherche et retournons true. 
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C ette approche dite par "force brute" fonctionnerait, mais elle risquerait d'etre assez lente, notamment 
sur les ordinateurs plus anciens. II existeune technique plus efficace. 

Si vous considerez ce qu'il faut pour faire une correspondance, vous verrez que certains motifs se 
constituent. En general, vous avez deux Piece du meme type dans une ligne. L'emplacement a cote 
de ces deux Piece est d'un type different mais peut etre permute dans trois sens afin d'y placer une 
autre Piece qui pourrait correspondre. Sans cela, vous avez deux Piece espacees d'un cran I'une de 
I'autre et une permutation pourrait inserer une Piece correspondante entre les deux. 

La Figure 8.9 presente ces deux configurations en les decomposant en six motifs possibles au final. 
Horizontalement, la Piece manquante dans la correspondance peut venir de la gauche ou de la droite 
alorsque, vertical ement, elle peut venir du hautou du bas. 
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Figure 8.9 

Lescercles remplis rep resentences pieces qui restenten place. Lescercles vides representent I'espace qui doit etre rempli 
par la piece concordante. Les cercles marques d'unecroix designent les emplacements possibles d'ou pourrait provenir 
cette piece concordante. 



Sachant qu'il n'y a que quelques motifs a examiner, nous pouvons ecrire une fonction qui recupere 
une liste des emplacements et determine si le motif concorde. Conformement a la technique de 
programmation de haut en bas, nous pouvons commencer par ecrire lookForPossibies puis nous 
soucier par la suite de la fonction de correspondance des motifs. 
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Si Ton examine I e premier motif a la Figure 8.9, on remarqueque, si deux emplacements contiennent 
une piece de meme type, nous obtenons un resultat positif des lors que I'un parmi trois autres contient 
une piece correspondante. Si lecerclerempli de gauche est consi dere etre I e poi nt 0 , 0, lesuivant (1 ,0) 
doitcorrespondreetil doity avoir au moins une Piece correspondante aux emplacements -1,-1,-2,0 
ou -1 ,1. La correspondance peut aussi se trouver du cote droit de la paire initiale, au niveau des 
positions 2, -1 , 2,1 et3,0. 

Recapitulons : il y a une Piece de depart. II y a ensuite une unique position qui doit correspondre a la 
Piece de depart. Enfin, il y a six autres positions dans lesquelles au moins une Piece doit correspondre. 
La Figure 8.10 presente cette combinatoire sous forme de diagramme. 



Figure 8.10 

La position 7,0 doit correspondre a 0,0 
Au moins un des six emplacements X 
doit ensuite aussi correspondre 0, 0. 
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0,0 1,0 3,0 

(X) ® 



L'appel defonction passeraun tableau des positions qui doivent correspondre etun second tableau des 
positions ou au moins une correspondance doit etre trouvee. II ressemblera ainsi a ceci : 

matchPattern(col, row, [[1,0]], [ [ -2,0] , [ -1 , -1 ] , [ -1 ,1 ] , [2, -1 ] , [2,1 ] , [3,0] ] ) ) 

Nous avons besoin d'un appel defonction si mi I aire pour gerer le cas "Horizontal, milieu" presente a 
la Figure 8.9. Idem ensuite pour les motifs verticaux. La fonction lookForPossibies les recherche 
tous, a toutes les positions dans la grille : 

// Verifier si un deplacement est possible dans la grille 
public function lookForPossibies ( ) { 
for(var col:int=0;col<8;col++) { 

for(var row: int=0; row<8; row++) { 

// Possibilite horizontale, deux plus un 
if (matchPattern(col, row, 

[[1,0]], [[-2,0], [-1,-1], [-1,1], [2,-1], [2,1], [3,0]])) { 
return true; 

} 



// Possibilite horizontale, milieu 
if (matchPattern(col, row, [[2,0]], [ [1 , -1 ] , [1 , 1 ] ] ) ) { 
return true; 

} 
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// Possibility verticale, deux plus un 
if (matchPattern(col, row, 

[[0,1]], [[0, -2], [-1,-1], [1,-1], [-1,2], [1,2], [0,3]])) { 
return true; 

} 

// Possibility verticale, milieu 

if (matchPattern(col, row, [[0,2]], [ [ -1 , 1 ] , [1 , 1 ] ] ) ) { 
return true; 

} 

} 

} 

// Aucun emplacement possible n'a ete trouve 
return false; 

} 

Lafonction matcnPattern, quoiqu'elle possede unetache importantea realiser, n'estpasunefonction 
tres longue. E lie doit obtenir le type de la Piece a la position de colonne et de ligne specifiee. Ensuite, 
el I e examine la liste mustHave et verifie la Piece a la position relative. Si el I e ne correspond pas, 
inutile de continuer et la fonction retourne false. 

Sinon chacune des Piece dans needone est verifiee. Si Tune quelconque correspond, la fonction 
retourne true. Si aucune ne correspond, la fonction s'arrete et retourne false : 

public function matchPattern(col,row:uint, mustHave, needOne:Array) { 
var thisType:int = grid[col] [row] .type; 

// S 1 assurer que les pieces imperatives sont la 
for(var i:int=0;i<mustHave.length;i++) { 
if ( !matchType(col+mustHave[i] [0] , 

row+mustHave[i] [1 ] , thisType)) { 
return false; 

} 

} 

// S'assurer qu'il existe au moins une des pieces requises 
for(i=0;i<needOne.length;i++) { 

if (matchType(col+needOne[i] [0] , 

row+needOne[i] [1 ] , thisType)) { 
return true; 

} 

} 

return false; 

} 
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Toutes les comparaisons dans matchPattern sont operees via des appels a matchType. C'est que nous 
essayonssouventd'examinerdes Piece qui nesetrouvent pas dans la grille. Parexemple, si lacolonne 
et la ligne passees a matchPattern sont 5,0 et que la Piece decalee de -1,-1 est examinee, nous 
examinonsen fait grid [4, -1 ], qui n'est pas definie, car il n'existe pas d'element -1 dans un tableau. 

La fonction matchType recherche des valeurs d' emplacement de la grille qui se trouvent hors de la 
grille que nous avons definie et retourne instantanement false lorsque cela se produit. Sinon la valeur 
degrid est examinee et la valeur true est retournee si le type correspond : 

public function matchType (col, row, type :int) { 

// S'assurer que col et row ne sont pas hors-linites 
if ((col < 0) II (col > 7) II (row < 0) II (row > 7)) return false; 
return (grid[col] [row] .type == type); 

} 

Memorisation du score et fin de partie 

DansfindAndRemoveMatches, nousavions appele addScore afin d'attribuer des points aujoueur. Cette 
fonction simple ajoute des points au score dujoueuret met a jour le champ textea I'ecran : 

public function addScore(numPoints:int) { 
gameScore += numPoints; 

MovieClip ( root ) .scoreDisplay. text = String(ganeScore) ; 

} 

Lorsqu'il nereste plus decorrespondance possible, la fonction endGame conduit le scenario principal 
a I'imagegameover. E I le utilise aussi swapChiidindex pour placer le gameSprite a I'arriere, afin que 
les sprites de I'image gameover se trouvent au-dessus de la grille du jeu. 

Nous devons proceder ainsi parce que nous ne supprimerons pas la grille du jeu a la fin de la partie. 
A u lieu de cela, nous la conserverons a cet endroit pour que lejoueur puisse I'examiner : 

public function endGame () { 
// Ramener a I'arriere 
setChildIndex(gameSprite,0) ; 
// Aller a la fin de partie 
gotoAndStopf "gameover" ) ; 

} 

Nous nous debarrassons de la grille (grid) et du sprite gameSprite lorsque lejoueur est pret a passer 
a la suite. La fonction cleanup s'en charge : 

public function cleanUpO { 
grid = null; 

removeChild (gameSprite) ; 
gameSprite = null; 

removeEventListener ( Event .ENTER_FRAME,movePieces) ; 

} 
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Dans le scenario principal, la fonction liee au bouton Play Again appelle cleanup juste avant de 
revenir a I' image precedente afin de commencer une nouvelle parti e. 

Modifier le jeu 

L'une des decisions importantes a prendre est de savoir si vous souhaitez six ou sept variantes de 
pieces dans lejeu. La plupart des jeux Match Three en comptentsix. J'en ai utilise sept par le passe, 
et cela fonctionnait egalement. Le recoursa sept pieces accelerela fin du jeu. 

Les points de bonus font partie des ameliorations importantes qui peuvent etre effectives. U n caique 
de graphisme supplemental re peut etre ajoute au clip Piece, de maniere analogue a la bordure de 
selection. II peut etre rendu visible sur des pieces aleatoires afin d'indiquer des points de bonus. U ne 
propriete bonus peut etre ajoutee a la Piece egalement, qui pourrait declencher un second appel a 
addScore lorsque cette Piece est supprimee. 

Les indications peuvent etre un moyen de rendre le jeu plus attrayant pour le joueur. Lorsque 
lookForPossibies estappelee, elleappel lematchType un certai n nombredefois. Si unecorrespondance 
possible est trouvee dans la seconde boucle a I'interieur de matchType, la valeur true est retournee. 
La position precise que matchType examine a ce stade est une Piece qui peut etre utilisee dans une 
permutation pour creer un alignement gagnant. Elle peut etre placee dans une nouvelle variable 
appelee par exemple nintLocation et cet emplacement peut etre utilise pour mettre en valeur une 
piece lorsque lejoueur clique sur le bouton Indice. 
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Jeux de mots : 
pendu et mots meles 

Au sommaire de ce chapitre : 

• Chaineset champs texte 

• Pendu 

• Mots meles 
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L'utilisation des lettres et des mots pour les jeux s'est considerablement populari see depuis le milieu 
du xx e siecle avec les jeux de societe tels que le Scrabble ou les jeux sur papier comme les mots 
croises et les mots meles. 

Cesjeuxfonctionnentbiencommejeuxd'ordinateuretsurleWeb. Danscechapitre, nous en etudierons 
deux versions classiques : lejeu du pendu etlejeu des mots meles. Avantcela, nousdevonscependant 
voir comment ActionScript gere les chaines et les champs texte. 



Chatnes et champs texte 



Codes sources 

(|[|)T£c http://flashgameu.com 

A3G PU 09 TextExamples.zip 



Avant d'essayer de creer des jeux de mots, il est utile de compendre comment ActionScript 3.0 gere 
les chaines et les champs texte, car nous nous en servirons frequemment dans nos jeux. 

Gestion des chames en ActionScript 3.0 

En ActionScript, une variable string (chaine) est une sequence de caracteres. Nousavonsdeja utilise 
des chaines dans ce livre, sans vraiment nous soucier de la maniere de real iser des operations avancees 
avec el les. 

Pour creer une chaine, il suffit d'attribuer des caracteres entoures de guillemets a une variable de 
type String : 

var mySt ring: St ring = "Why is a raven like a writing desk?"; 

Deconstruction des chames 

Les chaines peuventetredeconstruites avec unevarietedefonctions. Pourobtenirun unique caractere 
situe a un emplacement particulier, vous pouvez utiliser ciwAt : 

myString.charAt(9) 

Le resultat est ici 11 r". 



ActionScript commence a compter les positions des caracteres dans les chaines a partir du 
caractere 0. Le caractere 0 dans I'exemple precedent est ainsi "W", desorteque le caractere 
9 est "r". 
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II est egalement possible d'utiliser substr pour obtenir un ou plusieurs caracteres de la chaine. Le 
premier parametre est la position de depart et le second, le nombre de caracteres a retourner : 

myString.substr(9,5) 

Cette instruction retourne "raven". 

La fonction substring est une variante qui prend en parametre la position de depart et celle de fin. 
Elle retourne la portion de chaine allant du caractere de la position de depart jusqu'a un caractere 
avant la position de fin : 

mySt ring. substring (9, 14) 

Cette instruction retourne "raven". 

La fonction slice agit comme la fonction substring, sauf quant a I' interpretation du second 
parametre. Avec substring, les parametres sont inverses si le second est inferieur au premier. 

myString. substrings, 14) equivautdonc a myString.substring(14,9). 

La fonction slice vous permet d'utiliser des valeurs negatives pour le second parametre. Elle compte 
en arriere a parti r de la fin de la chaine. A insi, mystring.siice(9, -21 ) retourne "raven". 

substring et slice vous permettent toutes deux d'omettre le second parametre pour obtenir le reste 
de la chaine. 

nyString.slice(9) 
Cette instruction retourne "raven like a writing desk?". 

Comparer et rechercher des chaTnes 

Pour comparer deux chaines, il suffit d'utiliser I' operateur == : 

var testString = "raven"; 
trace(testString == "raven"); 

Ce code retourne true. L'operateur est cependant sensible a la casse, de sorte que le code suivant 
retourne false : 

trace(testString == "Raven"); 

Si vous souhaitez comparer deux chaines sans tenir compte de la casse des caracteres, convertissez 
I'une ou les deux en majuscules ou en minuscules. C'est ce que permettent de faire les fonctions 

toUpperCase et toLowerCase : 

testString. toLowerCase() == "Raven" .toLowerCase( ) 

Pour trouver une chaine a I'interieur d'une autre chaine, utilisez indexot : 

nySt ring . indexOf ( " raven " ) 
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Cette instruction retourne 9. Vous pouvez egalement utiliser lastindexof pour trouver la derniere 
occurrence d'une chaine a I'interieur d'une autre chaine : 

nyString.indexOf ("a") 
nyString .lastlndexOf ( "a" ) 

La premiere I igne retourne 7 et la seconde, 20. Cesvaleurs correspondent a la premiere et a la derniere 

position de la lettre dans la Chaine "Why is a raven like a writing desk?". 



Vous pouvez egalement fournir un second parametre a indexof et a lastindexof. Ce nombre 
^•^> indiqueou commencer la recherche dans la chaine au lieu de demarrer au debut. 



La plupart du temps, lorsquevous utiliserez indexof, vous chercherez non pas a connaitrela position 
dela chaine mais a savoir si elle existe. Si c'est lecas, indexof retourne un nombre superieur ou egal 
a 0. Si ce n'est pas le cas, elle retourne -1. Vous pouvez done determiner si une chaine se trouve a 
I'interieur d'une autre en utilisant une instruction comme la suivante : 

(nyString.indexOf ( "raven" ) != -1) 

Lafonction search offreun autre moyen de trouver une chaine a I'interieur d'une autre chaine: 
nySt ring . search ( " raven " ) 

Cette instruction retourne 9. 

Comme indique precedemment, la fonction search peut prendre une chaine en parametre, mais elle 
peut egalement prendre ce que Ton appelle une expression reguliere. 



U ne expression reguliere est un motif utilise pour trouver ou remplacer des chames a I'inte- 
rieur d'autres chaines. Les expressions regulieres sont utilisees dans de nombreux langages 
de programmation et outils logiciels. 

Le sujet des expressions regulieres est trop vaste pour etre traite ici, II existe d'ailleurs plu- 
sieurs livres de plus de mille pages qui lui sont entierement consacres ! De nombreux sites 
Web en traitent en detail. Consultez le site http://flashgameu.com pour trouver des liens sur 
ce sujet. 




nySt ring .search ( /raven / ) ; 

Cet exemple correspond au type le plus simple d'expression reguliere et equivaut a I'instruction 
precedents utilisant search. Vous remarquerez que c'est le caractere / qui est utilise et non les 
guillemets pour entourer les caracteres. 
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Vouspouvez egalement inclure des options apres la barre oblique dans I'expression reguliere. La plus 
utile serait ici lei, pour ignorer la casse des caracteres : 

nyString. search (/Raven/i) ; 

Cet exemple retourne 9, bienqu'il utilise unR majuscule. 

Vous pouvez aussi utiliser des jokers dans les expressions regulieres. Par exemple, le point represente 
n'importequel caractere : 

nyString. search(/r. . .n/) 

Cet exemple retourne 9 parce que le mot raven correspond au motif du r suivi par trois caracteres 
quelconques, puis un n. 

nySt ring . search ( / r . *n/ ) 

Cet exemple retourne aussi 9, le motif designant un r suivi par n'importequel nombrede caracteres, 
suivi par un n. 

Construire et modifier des chaTnes 

Vous pouvez ajouter des caracteres a une chaine en utilisant I'operateur +. ActionScript determiners 
qu'il s'agitd'un objet string (une chaine) etnon d'un nombreetajoutera les caracteres au lieu deles 
additionner. Vous pouvez egalement utiliser += pour realiser un simple ajout : 

myString = "Why is a raven like"; 
nyString += " a writing desk?"; 

Pour placer quelque chose avant une chaine existante, utilisez du codecomme lesuivant : 

nyString = "a writing desk?"; 

nyString = "Why is a raven like "+myString; 

Alorsquelafonction search recherche et retourne une valeurd' index, lafonction replace prend une 
expression reguliere et I'utilise pour remplacer une portion de la chaine : 

nyString. replace! " raven" , "door nouse" ) 
Cet exemple retourne "Why is a door mouse like a writing desk?" 

Vous pouvez egalement utiliser une expression reguliere dans le premier parametre. Cette approche 
permet de realiser des operations tres complexes, par exemple pour deplacer une portion de texte a 
I'interieur d'un texte au lieu d'importer un texte de remplacement : 

nyString. replace (/ (raven) (.*) (writing desk) /g, "$3$2$1 ") 

Cet exemple de code recherche raven et writing desk dans la chaine, separes par n'importe quel 
nombre de caracteres. II reordonne ensuite la chaine, en placant d'abord writing desk, en dernier 
raven et les memes caracteres entre les deux. 
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Conversions entre chaTnes et tableaux 

Leschaineset les tableaux sontaussi utiles les uns que les autres pour stacker des I istesd' informations. 
II est done interessant de pouvoir effectuer des conversions entre les deux. 

Parexemple ; vouspourriezsouhaitercreeruntableauapartird'unechainecomme" apple, orange, banana". 
Pour cela, vous pouvez utiliser la commande split : 

var myList: String = "apple, orange, banana" ; 
var myArray: Array = myList. split ( ",") ; 

Vous pouvez inverser le processus est utilisant la commande join : 

var myList: String = myArray. join( ",") ; 

Dans les deux cas, le caractere passe dans la fonction represente le caractere utilise pour separer les 
elements dans la chaine. Si vous utilisez la commande join, la chaine string resultante est recollee 
en inserant des virgules entre les elements. 

Synthese des fonctions de chame 

LeTableau 9.1 contient toutes les fonctions de chaine dont nous avons traite et quelques autres. 



Tableau 9.1 : Fonctions de chaine 



Fonction 


Syntaxe 


Description 


charAt 


myString . charAt (pos ) 


Retourne le caractere a remplacement indique 


charCodeAt 


String . charCodeAt (pos ) 


Retourne le code de caractere du caractere a 


I'emplacement indique 


concat 


myString . concat ( autreChaine ) 


Retourne une nouvelle chaine avec la seconde 


chaTne ajoutee a la premiere 


f romCharCode 


String . f romCharCode (num) 


Retourne le caractere correspondant au code 


de caractere 


indexOf 


myString . indexOf 

{chaine I nterieure , posDepart ) 


Retourne I'emplacement de la chaTne interne 
dans la chaTne principale 


join 


myArray . j oin (car) 


Combine les elements dans un tableau afin 


de creer une chaTne 


lastlndexOf 


myString . lastlndexOf 
{chaine I nterieure, posDepart) 


Retourne le dernier emplacement de la chaTne 
interieure dans la chaTne principale 


match 


myString . match ( expression ) 


Retourne la sous-chaTne qui correspond 
au motif 


replace 


myString . replace(expression, 


Remplace le motif 


remplacement) 
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Tableau 9.1 : Fonctions de chaine (Suite) 



Fonction 


Syntaxe 




Description 


search 


myString 


, search (expression) 


Trouve I'emplacement de la sous-chaine 
correspondant au motif 


slice 


myString 


.slice(debut,fin) 


Retourne la sous-chaTne 


split 


myString 


. split (car) 


Decompose la chame dans un tableau 


string 


String (pasUneChalne) 


Convertit un nombre ou une autre valeur 
en une chaine 


substr 


myString 


,substr(det)ot,long) 


Retourne la sous-chaTne 


substring 


myString 


.substr (debut, fin) 


Retourne la sous-chaTne 


toLowerCase 


myString 


, toLowerCase( ) 


Retourne la chame en lettres minuscules 


toUpperCase 


myString 


,toUpperCase( ) 


Retourne la chaine en lettres majuscules 



Appliquer une mise en forme au champ texte 

Pour placer du texte a I'ecran, vous devez creer un nouvel objet TextFieid, autrement dit un champ 
texte. Nous avons utilise ces champs dans les precedents chapitres afin de creer des messages texte et 
des affichagesde score. 

Si vous souhaitez utiliser autre chose que la police et le style par defaut, vous devez egalement creer 
un objet Text Format et I'attri buer au champ texte. Et, pour I' utilisation avanceedu texte dans les jeux, 
nous devrons encore inclure des polices dans nos animations. 

L'objet TextFormat 

L'objetTextFormat se cree general ementjuste avant de creer un objet TextFieid. II peutaussi I'etre 
au debut d'une classe si vous savez que vous allez utiliser ce format pour plusieurs des champs texte 
quevousallez creer. 

TextFormat n'est en fait rien d'autre qu'un conteneur pour un ensemble de proprietes qui controlent 
I'apparencedu texte. 



ActionScri pt vous permet egalement de creer des feuilles de style comparables aux CSS uti- 
lises dans les documents HTM L. Ces feuilles de style ne sont cependant utiles que pour les 
champs texte formates en HTM L. Pour notre part, nous n'utiliserons que des champs texte 
bruts dans nos jeux. 
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Vousavez deux choix lorsdela creation d'un Text Format. Le premier consiste a creer simplement un 
objet TextFormat vide puis a definir chacunedeses proprieties. Le second consiste a definir plusieurs 
des proprietes les plus courantes dans la declaration TextFormat. 

Voici un exemple de la methode de creation rapide d'un objet TextFormat : 

var letterFormat :TextFormat = new 

Text Format ("Monaco" ,36, 0x000000, true, false, false, null, null, "center" ) ; 

II est evidemment important de se rappeler I'ordre exact des parametres pour TextFormat. II est le 
suivant : police, taille, couleur, gras, italique, soul igne, url, cible et alignement. Vous pouvez inclure 
le nombre de proprietes que vous souhaitez, pourvu qu'elles soient indiquees dans cet ordre. Utilisez 
nun pour passer les proprietes que vous ne souhaitez pas definir. 



La listedes parametres est en fait plus etendue, maisjelesai omis dans I e precedent exemple : 
marge gauche (leftMargxn), marge droite (nghtMargm), retralt (indent) et interlignage 

(leading). 



Voici maintenant la methode longue : 

var letterFormat :TextFormat = new TextFormat ( ) ; 
letterFormat.font = "Monaco"; 
letterFormat.size = 36; 
letterFormat. color = 0x000000; 
letterFormat.bold = true; 
letterFormat. align = "center"; 

Vous remarquerez quej'ai laisse les proprietes italic et underline, car la valeur false est utilisee 
par defaut pour les deux. 

LeTableau 9.2 presente une synthese de toutes les proprietes TextFormat. 



Tableau 9.2 : Proprietes de TextFormat 



Propriete 


Valeur s d 'exemple 




Description 


align 


TextFormatAlign . 
TextFormatAlign . 
TextFormatAlign . 
TextFormatALign . 


LEFT, 
RIGHT, 
CENTER, 
JUSTIFY 


Alignement du texte 


blocklndent 


Nombre 




Retrait de toutes les lignes d'un paragraphe 


bold 


true/false 




Passe le texte en gras 


bullet 


true/false 




Affiche le texte sous forme de liste a puces 
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Tableau 9.2 : Proprieties de TextFormat (Suite) 



Propriete 


Valeurs d'exemple 


Description 


color 


Couleur 


Couleur du texte (par exemple, 0x000000) 


font 


Norm de police 


Police a utiliser 


indent 


Nombre 


Retrait de la premiere ligne du paragraphe 
uniquement 


italic 


true/false 


Passe le texte en italique 


kerning 


true/false 


Active I'espace special de certains caracteres 
(crenage) dans certaines polices 


leading 


Nombre 


Espacement vertical entre les lignes (interlignage) 


lef tMargin 


Nombre 


Espace supplementaire a gauche 


letterSpacing 


Nombre 


Espace supplementaire entre les caracteres 


rightMargin 


Nombre 


Espace supplementaire a droite 


size 


Nombre 


Taille de la police 


tabStops 


Tableau de nombres 


Emplacements de tabulation definis 


target 


ChaTne 


Cible navigateur d'un lien (par exemple, "_blank") 


underline 


true/false 


Souligne le texte 


url 


ChaTne 


L'URLdu lien 



Creer des objets TextField 

Unefoisque vous avez un format, il vousfaut un champ texte auquel I'appliquer. L'objet TextField 
secreea la maniered'un sprite. II s'agit en fait dans les deux cas d'un objet d'affichage. Tous deux 
peuvent etre ajoutes a d'autres sprites ou a d'autres clips avec addChiid : 

var myTextField: TextField = new TextFieldO; 
addChild(myTextField) ; 

Pour attribuer un format a un champ, la meilleure methode consiste a utiliser la propriete 

def aultTextFormat : 

myTextField .def aultTextFormat = letterFormat; 

L'autre possi bi lite consiste a utiliser la fonction setTextFormat. Le probleme tient alors a ce que, 
lorsque vous definissez la propriete text du champ, la mise en forme du texte revient a la mise en 
forme par defaut pour ce champ : 

myTextField .setTextFormat (letterFormat) ; 
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L'avantage de setTextFormat tient a ce que vous pouvez ajouter un deuxieme et un troisieme 
parametre pour specifier les caracteres de debut et defin pour la mise en forme. Vous pouvez formater 
un fragment de texte au lieu du texte entier. 

Dans les jeux, nous utilisons generalement de petits champs texte pour differents usages comme 
I'affichagedu score, du niveau, du temps dejeu, du nombredevies, etainsi de suite. Ces champs ne 
requierent pas pi usieursformatsdetexteetsontsouventmisajour. La definition dedefauitTextFormat 
constitue done la meilleure approche dans la plupart des cas. 

Apres defauitTextFormat, la prochaine propriete la plus important pour nous est selectable. La 
plupart des champs texte que nous utiliserons pour les jeux ne sont destines qu'a un role d'affichage 
uniquement ou I ' uti I i sateu r n'est pas cense pouvoir cliquer dessus. Nous desactiverons ainsi la 
propriete selectable afin que lecurseurnesemodifie pas lorsqu'i I survolelechamp etquel'utilisateur 
ne puisse selectionner le texte. 



La propriete border du champ texte estun moyen utile de verifier la tail le et 1'emplacement du 
champ cree avec ActionScript. Par exemple, si vous ne placez qu'un mot ou une lettre dans un 
champ, vous ne pourrez pas voir veritablement la tallle du champ sans positionner border a 
true, ne serait-ce quetemporairement, pour les besoins de votre test. 




Le Tableau 9.3 presentecertaines proprietes utiles de I'objet Text Field. 



Tableau 9.3 : Proprietes de TextField 



Propriete 


Valeurs 




Description 




TextFieldAutoSize 


.LEFT, 




autoSize 


TextFieldAutoSize 


.RIGHT, 


Redimensionne le champ texte afin 


TextFieldAutoSize 
TextFieldAutoSize 


.CENTER, 
.NONE 


de I'ajuster au texte place dedans 


background 


true/false 




Indique s'il y a un remplissage d'arriere-plan 


backgroundColor 


Couleur 




Couleur du remplissage d'arriere-plan 
(par exemple, 0x000000) 


border 


true/false 




Indique s'il y a une bordure 


borderColor 


Couleur 




Couleur de la bordure 




(par exemple, 0x000000) 


defauitTextFormat 


Objet TextFormat 




Definit le format de texte par defaut utilise 
lorsque du nouveau texte est applique 


embedFonts 


true/false 




Doit etre positionne a true pour utiliser 
des polices incorporees 
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Tableau 9.3 : Proprietes de TextField (Suite) 



Prn n yip fp 


r 11 1 L 111 ki 


rip vin tin 11 


multiline 


true/false 


Doit etre positionne a true pour contenir 

nliKiPiir^ l.nnp^ Hp tpytp 

UIUjICUI _> liyi ICj UC LCA LC 


selectable 


true/false 


Si true, I'utilisateur peut selectionner le 


lexie aans le cndmp lexte 


tPYt 


C h 3 1 ne 


Plofinit Ip rnntoni i ontior Hi i tovta Hi i rha m io 
L/cMIHL Itr LUMLtrMU trilLIfcfl UU LfcrALtr UU LlldlM[J 


textColor 


Couleur 


Definit la couleur du texte (par exemple, 


0x000000) 


type 


TextFieldType . DYNAMIC, 


Definit si I'utilisateur peut editer le texte 


TextFieldType. INPUT 


wordwrap 


true/false 


Definit le renvoi a la ligne du texte 



Polices 

Si vouscreez un jeu rapideen guise a" exemple, pour amuservos amis ou simplement pour illustrer un 
point, vous pouvez vousen tenir aux polices de base. C'estce que nous avons fait dans la plupart des 
jeux decelivre, afin qu'ilsrestentaussi simples que possible. 

Si vousdeveloppez un jeu pour un client ou pour votre site Web, vousdevrez en revanche importer I es 
pol i ces que vous uti I i sez dans votre bi bl i otheque. Vous rendrez ai nsi votre j eu i ndependant des pol i ces 
que les utilisateurs possedent sur leur ordinateur. Cela vous permettra egalement d'utiliser des effets 
plusevoluesavec les polices, commela rotation et la transparence alpha. 

Pour importer une police, accedez a la bibliotheque et choisissez Nouvelle police dans le menu 
deroulant (comme vous I'avez fait precedemment au Chapitre 7). 

Apresavoir importela police, nommez-la, cliquez du bouton droit sous Windowsou avec la toucheCtrl 
enfonceesur M ac pour selectionner I'option Proprietes de liaison et incluez la police dans I'animation. 




Les programmers oublient couramment de definir les Proprietes de liaison pour les polices. 
A la difference des clips, les proprietes de liaison n'apparaissent pas dans la boTte de dia- 
logue Proprietes standard des polices. El les sont difficiles a trouver et done faciles a oublier. 
Aucune erreur ni aucun avertissement n'apparalt lorsque vous essayez d'utiliser des polices 
que vous avez oublie de lier. 



M erne apres avoir incorpore certaines polices, vos champs texte n'utiliseront vos polices que si vous 
positionnez la propriete embedFonts a true. 
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En utilisant les polices qui se trouvent dans votre bibliotheque, vous pouvez manipuler et animer du 
texte de differentes manieres. 

Exemple de texte anime 

Les fichiers TextFly.fla et TextFly.as montrent comment utiliser des chaines, des formats de texte et 
des champs texte pour creerune animation. Le fichier d'animation necontient rien a I'exception dela 
police. La scene est vide. 

LaclasseTextFly.asprend unechaineet la decompose en caracteres, demanierea produireun unique 
TextFieid et un sprite pour chaque caractere. Elle anime ensuite ces sprites. 

La classe commence par definir une serie de constantes qui determineront le comportement de 
I'animation : 

package { 

import flash. display.*; 
import flash. text.*; 
import f lash. geom. Point; 
import flash. events.*; 
import flash. utils. Timer; 

public class TextFly extends MovieClip { 

// Constantes pour definir I'animation 

static const spacing: Number = 50; 

static const phrase:String = "FlashGameU" ; 

static const numSteps:int = 50; 

static const stepTime:int = 20; 

static const totalRotation: Number = 360; 

static const startScale: Number = 0.0; 

static const endScale: Number = 2.0; 

static const startLoc: Point = new Point(250,0) ; 

static const endLoc: Point = new Point (50, 100) ; 

private var letterFormat :TextFormat = 
new TextFormat ( "Monaco " , 36 , 0x000000 , true , false , 
false , null , null , TextFormatAlign . CENTER ) ; 

Ensuite, elle definit des variables pour contenir les sprite et I'etat de I'animation : 

// Variables pour tenir registre de I'etat de I'animation 
private var letters: Array = new Array(); 
private var flySprite: Sprite; 
private var animTimer: Timer; 
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La fonction constructeur cree tous les objets TextFieid et sprite. Elle lance egalement I'animation 
en creant un Timer : 

public function TextFly() { 

// Un sprite pour tout contenir 
flySprite = new Sprite(); 
addChild(flySprite); 

// Creer toutes les lettres sous forme de champs texte dans des sprites 
for(var i:int=0;i<phrase.length;i++) { 

var letter:TextField = new TextField(); 

letter. def aultTextFormat = letterFormat; 

letter. embedFonts = true; 

letter. autoSize = TextFieldAutoSize. CENTER; 

letter. text = phrase. substr(i, 1 ) ; 

letter. x = -letter. width/2; 

letter. y = -letter. height/2; 

var newSprite: Sprite = new Sprite(); 

newSprite.addChild(letter) ; 

newSprite. x = startLoc.x; 

newSprite. y = startLoc.y; 

flySprite. addChild(newSprite) ; 

letters. push(newSprite) ; 

} 

// Lancer I'animation 
aninTiner = new Timer (stepTine,numSteps) ; 
aninTiner.addEventListener(TimerEvent. TIMER, animate) ; 
aninTiner. start ( ) ; 

} 

Then, with each step of the animation, the rotation and scale of the Sprites will be set: 
public function animate(event:TimerEvent) { 
// Ou en est I'animation ? 

var percentDone: Number = event. target. currentCount/event. target. repeatCount; 

// Changer position, echelle et rotation 
for(var i:int=0;i<letters.length;i++) { 

letters[i].x = startLoc.x* (1 .0-percentDone) + (endLoc.x+spacing*i)*percentDone; 
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letters[i].y = startLoc.y*(1 .O-percentDone) + endLoc.y*percentDone; 
var scale: Number = startScale* (1 -percentDone)+endScale*percentDone; 
letters[i] .scaleX = scale; 
letters[i] .scaleY = scale; 

letters[i] .rotation = totalRotation* (percentDone-1 ) ; 



} 

La Figure 9.1 presente cette animation en cours d'action. 

II est important de pouvoir control er des champs texteet des formats a ce niveau si vous prevoyez 
de creer des jeux qui utilisent des lettres ou des mots comme pieces dejeu. Nous al Ions ainsi 
maintenant examiner un jeu de pendu, sans doute lejeu de lettre le plus simple qu'il soit possible 
de creer. 



Figure 9.1 

Le programme TextFly anime 
des caracteres dans du texte 
pour les faire voltiger. 




Pendu 



Codes sources 

(|[|)T^c http://flashgameu.com 

A3GPU 09 Hangman.zip 



L e pendu est un j eu tres si mple a programmer. Pour ne pas deroger a cette si mpl i cite, nous proposerons 
dans cet exemple une version depourvue d'artifices du programme. 
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Configurer le pendu 

En general, le jeu du pendu se joue a deux personnes. La premiere choisit un mot ou une phrase et 
dessine chacune des lettres avec un trait de soulignement, puis la seconde s'efforce de deviner les 
lettres qui lecomposent. 

Lorsque le second joueur devine une lettre du mot ou de la phrase, le premier remplit les espaces 
correspondants ou se trouve la lettre. Si le second joueur choisit une lettre qui n'est pas utilisee, le 
premier dessine une portion supplemental d'un pendu dans une image. En general, il suffit de 
quelques responses incorrectes pour completer le pendu, apres quoi la partie est perdue. 

Dans notre jeu, nous utiliserons une sequence a sept etapes qui different un petit peu d'un pendu. La 
Figure 9.2 montre notre caracteredemascottesuspendu a une branche. Apres sept choix incorrects, 
la mascottetombe. 

L'animation Hangman.fla contient done ceseul clip, qui se trouve place dans la scene vers la droite. 
II n'y a sinon rien de special avec cette animation, sauf quesa classeest definiecommeetant Hangman. 




Le pendu est apparu au xix e siecle, vers I'epoque ou Ton utilisait des potences pour punir les 
criminels. Cette image i nha bituel I e est toujours utilisee dans lejeu d'aujourd'hui, memes'il 
est possible de lui substituer n'importe quel type de sequence en sept etapes. 



Figure 9.2 

Cette sequence de sept images peut 
etre remplacee par n'importe quelle 
sequence du memetype 




• •a 
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La classe Hangman 

Le jeu tout entier ne fait que cinquante lignes de code. Seules quatre variables de classe sont requises. 
II est plaisant de voir qu'un jeu plutot interessant peut etre cree si rapidement et si facilement en 
ActionScri pt 3.0. 

Deux chaines sont requises : I'une pour contenir la phrase et I' autre pour contenir le texte d'affichage, 
qui commence par des caracteres de soulignement a I'endroit ou les lettres doivent figurer. Nous 
aurons ensuite une variable pour contenir une reference au champ texte et une autre pour tenir le 
registredu nombre d'essai s infructueux : 

package { 

import flash. display.*; 
import flash. text.*; 
import flash. events.*; 

public class Hangman extends Sprite { 
private var textDisplay :TextField; 
private var phrase:String = 
"Imagination is more important than knowledge."; 
// - Albert Einstein 

private var shown:String; 
private var numWrong:int; 

Lorsque la classe demarre, el I e cree une copie de la phrase en la faisant traiter par la fonction replace 
avec une expression reguliere. L'expression /[A-za-z]/g a n'importe quel caractere de lettre (en 
somme, deA a Z et dea a z). Elle remplacecescorrespondances par un caractere de soulignement : 

public function Hangman () { 

// Creer une copie du texte avec un _ pour chaque lettre 
shown = phrase. replace! / [A-Za-z] /g, "_") ; 
numWrong = 0; 

Le champ texte que nous allons configurer utilisera un format de texte simple pour la police Courier, 
a 30 points. II definira la largeuret la hauteur demaniere que I e texte n' interfere pas avec legraphisme 
dela mascotte cote droit. 



J 'ai choi si la police Courier parce qu'i I s'agit d'une police a chasse fixe, ce qui signifie que 
toutes les lettres possedent la meme largeur. Les autres polices possedent des largeurs varia- 
bles pour les differentes lettres (par exemple pour le I et lew). En uti I isant une police a chasse 
fixe, nous avons la garantie que les caracteres de texte ne changeront pas de position lorsque 
nous remplagons les caracteres de soulignement par des lettres. 




Chapitre 9 



Jeux de mots : pendu et mots meles 339 



// Configuration du champ texte visible 
textDisplay = new TextField( ) ; 

textDisplay.def aultTextFormat = new TextFormat( "Courier" ,30) ; 

textDisplay. width = 400; 

textDisplay. height = 200; 

textDisplay. wordwrap = true; 

textDisplay. selectable = false; 

textDisplay. text = shown; 

addChild (textDisplay) ; 

La fonction pressKey sera attribute a I'evenement keyjjp pour la scene : 

// Ecouter les appuis sur les touches 

stage . addEvent Listener ( KeyboardEvent . KEYJJP , pressKey ) ; 

} 

Lorsque lejoueur enfonce une touche, nous utilisons le code event . charCode retourne pour connaitre 
la touche appuyee: 

public function pressKey(event:KeyboardEvent) { 
// Determiner la touche enfoncee 

var charPressed:String = (String. fromCharCode(event. charCode) ) ; 

U ne fois que cette lettre est connue, nous recherchons d'eventuelles correspondances dans la phrase. 
Nous veillons a bien utiliser toLowercase afin que I'appui sur la touche puisse correspondre aux 
versions en majuscules ou en minuscules de la phrase. 

Lorsqu'une correspondance est trouvee, la variable affichee est mise a jour en remplacant le caractere 
desoulignementau niveau de cette position parla lettre correspondantede la phrase. La lettre utilisee 
est ainsi en majuscule ou en minuscule comme el I e Test originel lement dans la phrase : 

// Boucle pour trouver les lettres correspondantes 

var foundLetter:Boolean = false; 

for(var i:int=0;i<phrase.length;i++) { 

if (phrase. charAt(i) .toLowerCase( ) == charPressed) { 

// Correspondance trouvee, changer la phrase affichee 

shown = shown .substr(0, i)+phrase. substr(i, 1 )+shown. substr(i+1 ) ; 

foundLetter = true; 

} 

} 

La variable booleenne foundLetter est posi tionnee a false lorsque cette recherche demarre et 
reinitialises a true si une correspondance est trouvee. Si el le reste a false, nous savons done que la 
lettre ne se trouvait pas dans la phrase et I'image du pendu peut progresser. 
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Avant cela, nous al Ions cependant mettre a jour le texte a I'ecran en attri buant la valeur shown au 
champ texte : 

// Mettre a jour le texte a I'ecran 
textDisplay.text = shown; 

// Mettre a jour le pendu 
if ( IfoundLetter) { 
numWrong++; 

character. gotoAndStop(numWrong+1 ) ; 

} 

} 



Lors des tests dans F lash, assurez-vous de choisir I ' o pti on de menu Controle > Desactiver 
les raccourcis clavier. Sans cela, les appuis que vous ferez sur les touches ne parviendront 
pas a la fenetre du jeu. 



Ce jeu court et simple peut etre etendu afin d'inclure les elements dejeux auxquels nous sommes 
habitues, comme un ecran de depart et un ecran de fin de parti e. Cet exemple montre qu'il n'est pas 
necessaire de passer plus de quelques heures pour creer un jeu amusant. 

Considerons maintenant un jeu de mots plus robuste, celui des mots meles. 



Mots meles 



Codes sources 

(|[|)T£c http://flashgameu.com 

A3GPU09_WordSearch.zip 



On pourrait penser que le jeu des mots meles est un jeu fort ancien, mais il n'a en realite fait son 
apparition qu'au cours des annees 1960. Ces jeux sont populaires dans les pages des journaux et dans 
les revues de vacances. 

Les jeux de mots meles informatiques peuvent etre generes aleatoirement a partir d'une listede mots 
ou dedictionnaires. Cesysteme les rend pi us faci les a creer : il vous suffit de f ourni r une listede mots. 

Bien des aspects posent cependant des defis lors de la creation d'un jeu de mots meles sur ordinateur, 
par exemple pour I ' affichage des I ettres, pour la miseen surbri I lance horizontal e, verticaleetdiagonale 
et la conservation d'une liste de mots. 
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Strategie de developpement 

Notre jeu prendra une listede mots et creera une grille de 15 x 15 lettres representant ces mots parmi 
d'autres lettres aleatoi res. La Figure 9.3 presente un exemplede grille complete. 

Nous allons done commencer par une grille vide et selectionner des mots aleatoi res dans la liste, des 
positions aleatoi res et des directions aleatoi res. Ensuite, nousessaierons d'inserer le mot. S'il netient 
pas ou s'il recouvre des lettres deja placees dans la grille, le placement est rejete et une nouvelle 
tentative est effectuee avec un autre mot, un autre emplacement et une autre direction. 



Figure 9.3 

La grille au depart, avec 
la liste de mots sur la droite. 
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Tous les puzzles de mots meles n ' uti I i sent pas les huit directions. Certains n'affichent pas les 
mots en sens inverse, d'autres n ' uti I i sent pas les diagonales. Tout est affaire de niveau de 
difficulty Les puzzles les plus simples conviennent aux jeunes enfants, mais sont bien trop 
simples pour les adultes. 



Cette boucle se repete jusqu'a ce que tous les mots soient places ou qu'un nombre predefini de 
tentatives ait ete realise. Cela nous permetd'eviter les cas ou il ne resteplusd'espace pourun mot. II 
n'est done pas assure que tous les mots tiennent dans le puzzle. 

Notre exemple n' utilise que neuf mots; il est done peu probable que cela seproduise, mais les listes 
plus longues peuvent rencontrer des problemes. Les listes de mots extremement longues n'utiliseront 
qu'un echantillon des mots a chaquefois, ce qui rend lejeu plus interessant a jouer plusieursfois de 
suite par la meme personne. 
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U nefois que les mots ont ete places, toutes les positions de lettres non uti Usees sont remplies avec des 
lettres aleatoi res. 

En outre, une listedes mots inclus est placeea droitede I'ecran. A mesurequeces mots sont trouves, 
ils changent de couleur dans la liste. 

Le joueur utilise la souris pour cliquer sur la grille et faire glisser sa selection. Nous dessinerons 
une lignesous les lettres afin d'indiquer celles qui sont selectionnees. Nous ne leferons cependant 
que pour les selections valides, autrement dit pour les selections horizontales, verticales ou en 
diagonale a 45 degres. La Figure 9.4 montre les differentes directions dans lesquelles un mot peut 
etre dispose. 



Figure 9.4 

Les selections valides peuvent 
s'orienter dans huit directions 
differentes. 
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U nefois que tous les mots ont ete trouves, la partie se termine. 



Definition de la classe 

L'imagedujeu dans I 'animation est completement vide. Tout sera cree par le code ActionScript. Pourcela, 

noUS aurons besoin des bi bl iotheques de Classes flash . display, flash .text, flash . geom et flash . events : 
package { 

import flash. display.*; 
import flash .text .* ; 
import flash. geom. Point; 
import flash. events.*; 
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Plusieurs constantes faciliteront I'ajustement de la taille du puzzle, I'espacement entre les lettres, la 
taille de la ligne de surlignement, le decalage ecran et leformat du texte : 

public class WordSearch extends MovieClip { 
// Constantes 

static const puzzleSize:uint = 15; 

static const spacing: Number = 24; 

static const outlineSize:Nunber = 20; 

static const offset:Point = new Point(15, 15) ; 

static const letterFormat:TextFormat = new TextFormat( "Arial" , 18, 0x000000, true, 
false, false, null, null, TextFormatAlign. CENTER) ; 

Pour tenir le registre des mots et de la grille des lettres, nous utiliserons les trois tableaux suivants : 

// Mots et grille 
private var wordList:Array; 
private var usedWords:Array; 
private var grid:Array; 

Le dragwiode indique si le joueur selectionne actuellement une sequence de lettres. startPoint et 
endPoint definissent cette plage de lettres. numFound comptabilise tous les mots trouves : 

// Etat du j eu 

private var dragMode:String; 

private var startPoint, endPoint: Point; 

private var numFound :int; 

Ce jeu utilisera plusieurs sprite. Le gameSprite contient tout. Les autres contiennent un type 
d'element particulier : 

// Sprites 

private var gameSprite:Sprite; 
private var outlineSprite:Sprite; 
private var oldOutlineSprite:Sprite; 
private var letterSprites:Sprite; 
private var wordsSprite:Sprite; 

Creer la grille de recherche des mots 

La fonction startwordSearcn a beaucoup a faire pour creer une grille de puzzle a utiliser dans lejeu. 
Elle s'appuiera sur la fonction piaceLetters pour realiser une partie du travail. 
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La fonction startWordSearch 

Pour lancer lejeu, nous allons creer un tableau avec les mots utilises dans I e puzzle. Dans cet exemple, 
nous utiliserons les neuf planetes, en ignorant les recentes indispositions de I'Union internationale 
d'astronomie concernant le statut de Pluton : 

public function startWordSearch ( ) { 
// Liste des mots 

wordList = ( "Mercury, Venus, Earth, Mars, Jupiter, Saturn, Uranus, Neptune, Pluto" ) . split ( ",") ; 

Les Sprite sont ensuite crees. lis le sont dans I'ordre ou ils doivent etre disposes sur la scene. Les 
lignes de surbrillance doivent se trouver sous les lettres. Seul le gameSprite est ajoute a la scene. 
Tous les autres sont ajout.es au gameSprite : 

// Configuration des sprites 
gameSprite = new Sprite) ); 
addChild (gameSprite) ; 

oldOutlineSprite = new Sprite(); 
gameSprite . addChild (oldOutlineSprite) ; 

outlineSprite = new Sprite(); 
gameSprite . addChild (outlineSprite) ; 

letterSprites = new Spritef); 
gameSprite . addChild ( letterSprites ) ; 

wordsSprite = new Sprite(); 
gameSprite . addChild (wordsSprite) ; 

Les Sprite des lettres seront stockes dans le tableau grid. Nous appellerons cependant d'abord 
piaceLetters afin d'obtenir un tableau imbriqueavec lescaracteres a placer dansces sprite. 

En fait, nous nous occupons de decomposer en deux etapes la tache qui consiste a creer la grille du 
jeu. La premiere etape sert a creer une grille virtuellede lettres sous forme de tableau imbrique. E I le 
servira a ajouter les mots de la liste des mots et a remplir le reste avec des lettres aleatoires : 

// Tableau de lettres 

var letters :Array = placeLetters( ) ; 

M aintenant que nous savonsou les lettres seront placees, nous devons creer les sprite, a raison d'un 
par lettre. Pour commencer, chaque lettre obtient un TextFieid. Ensuite, ce champ est ajoute a un 
nouveau Sprite : 

// Tableau de sprites 

grid = new Array ( ) ; 

for(var x:int=0;x<puzzleSize;x++) { 
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grid[x] = new Array() ; 

for(var y:int=0;y<puzzleSize;y++) { 

// Creer un nouveau champ et un sprite pour la lettre 

var newLetter:TextField = new TextField() ; 

newLetter.defaultTextFormat = letterFormat; 

newLetter.x = x*spacing + offset. x; 

newLetter.y = y*spacing + offset.y; 

newLetter. width = spacing; 

newLetter. height = spacing; 

newLetter. text = letters[x] [y] ; 

newLetter. selectable = false; 

var newLetterSprite:Sprite = new Sprite(); 

newLetterSprite . addChild ( newLetter) ; 

letterSprites . addChild ( newLetterSprite) ; 

grid[x][y] = newLetterSprite; 

En plus d'etre creeetajoute a letterSprites, chaque sprite doit se voir associer deux evenements : 
mouse_down et mousejdver. L e premier demarre une selection et I e second permet a la selection d'etre 
mi se a jour a mesure que le curseur survole des lettres differentes : 

// Ajout des ecouteurs evenementiels 

newLetterSprite. addEventListener(MouseEvent.M0USE_D0WI\l, clickLetter) ; 
newLetterSprite. addEventListener ( MouseEvent .M0USE_0VER, overLetter) ; 

} 

} 

Lorsque le joueur relache le bouton de la souris, nous ne pouvons avoir la garantie qu'il se trouve au- 
dessus d'une lettre a ce moment. Au lieu d'attacher I'ecouteur evenementiel mouse_up aux lettres, 
nous I'attachons done a la scene : 

// Ecouteur de la scene 

stage. addEventListener(MouseEvent.MOUSE_UP, nouseRelease) ; 

La derniere chose a creer est la liste des mots a droite. II s'agit d'une simple collection d'objets 
TextFieid places dans le sprite wordssprite. Un objet est cree pour chaque mot dans le tableau 
usedwords. Ce tableau sera cree par piaceLetters et ne contiendra que les mots qui ont pu trouver 
place dans le puzzle: 

// Creer les champs et les sprites de la liste de mots 
for(var i:int=0;i<usedWords.length;i++) { 
var newWord:TextField = new TextFieldO; 
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newWord .defaultTextFormat = letterFormat; 

newWord.x = 400; 

newWord.y = i*spacing+offset.y; 

newWord .width = 140; 

newWord. height = spacing; 

newWord. text = usedWords[i] ; 

newWord. selectable = false; 

wordsSprite.addChild(newWord) ; 

} 

Lejeu est pret a etrejoue, hormis qu'il faut encore definir les variables dragMode et numFound : 

// Definition de l'etat du jeu 
dragMode = "none" ; 
numFound = 0; 



La fonction placeLetters 

La fonction placeLetters realise plusieurs taches epineuses. Pour commencer, el I e cree une grille 
vide de 15 x 15 caracteres sous forme de tableau imbrique. Chaque emplacement dans la grille est 
rempli avec un * qui representeun emplacement vide dans I e puzzle: 

// Placer les mots dans une grille de lettres 
public function placeLetters( ) :Array { 

// Creer une grille vide 

var letters :Array = new Array(); 

for(var x:int=0;x<puzzleSize;x++) { 

letters[x] = newArrayf); 

for(var y : int=0;y<puzzleSize;y++) { 
letters[x] [y] = "*" ; 

} 

} 

L'etape suivante consiste a creer une copie de wordList. Nous souhaitons utiliser une copie et non 
I'original car nous allons supprimer des mots a mesure que nous les placons dans la grille. Nous 
placerons en outre les mots que nous utilisons dans un nouveau tableau appele usedwords : 

// Creer une copie de la liste des mots 
var wordListCopy :Array = wordList. concat( ) ; 
usedWords = new Array(); 



Chapitre 9 



Jeux de mots : pendu et mots meles 347 



II est maintenant temps d'ajouter des mots dans la grille. Cette operation s'effectue en choisissant un 
mot aleatoire, un emplacement aleatoire et une direction aleatoire. Ensuite, nous essayons de placer 
le mot dans la grille, lettre par lettre. Si un confl it se produit (par exemple, le bord de la grille est 
atteint ou une lettre existante dans la grille ne correspond pas a la lettre que noussouhaitons placer a 
cet endroit), la tentative est annulee. 

Nouspoursuivronsnosessais, en i nserant parfois un mot, en echouantd'autresfois. Nouscontinuerons 
ainsi jusqu'a ce que wordListcopy soit vide. Nous comptabiliserons cependant aussi le nombre de 
tentatives operees dans repeatTimes, qui commencera a 1 000 et decroitra a chaque tentative. Si 
repeatTimes atteint zero, nous cessons d'ajouter des mots. A cepoint, il estfort probable que tousles 
mots capables de tenir dans le puzzle s'y trouvent deja. Nous n'utiliserons pas le reste des mots dans 
cette configuration aleatoire. 



Nous utiliserons la technique qui consiste a etiqueter les boucles afin de pouvoir utiliser la 
commande continue pour forcer le programme a passer directement au debut d'une boucle 
en dehors de la boucle actuelle. Sans ces etiquettes, II serait bien plus difficile de creer le 
code qui suit. 

// Operer 1 000 tentatives pour ajouter les mots 
var repeatTimes :int = 1000; 
repeatLoop:while (wordListcopy . length > 0) { 
if (repeatTimes-- <= 0) break; 

// Selectionner un mot, un emplacement et une direction aleatoires 
var wordNum:int = Math. floor(Math. random( )*wordListCopy. length) ; 
var word:String = wordListCopy[wordNum] .toUpperCase( ) ; 
x = Math.floor(Math.random()*puzzleSize) ; 
y = Math.floor(Math.random()*puzzleSize) ; 
var dx:int = Math.floor(Math.random()*3) -1 ; 
var dy:int = Math.floor(Math.random()*3) -1 ; 
if ((dx == 0) && (dy == 0)) continue repeatLoop; 

// Verifier chaque emplacement dans la grille pour voir si le mot tient 
letterLoop:for (var j :int=0;j <word. length ;j++) { 
if ( (x+dx*j < 0) 1 1 (y+dy*j < 0) 1 1 
(x+dx*j >= puzzleSize) II (y+dy* j >= puzzleSize)) 
continue repeatLoop; 

var thisLetter:String = letters[x+dx*j ] [ y+dy* j ] ; 
if ((thisLetter != "*") && (thisLetter != word.charAt( j ) ) ) 
continue repeatLoop; 
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// Inserer le not dans la grille 
insertLoop:for ( j =0;j<word. length ;j++) { 

letters[x+dx*j ] [ y+dy* j ] = word.charAt(j ) ; 

} 

// Supprimer le mot de la liste 
wordListCopy.splice(wordNum,1 ) ; 
usedWords.push(word) ; 

} 

M ai ntenant que nous avonsdevrais mots dans I a grille, celle-ci doit ressembler a celle de la Figure 9.5, 
qui represente un jeu sans I'etape suivante. 



Figure 9.5 

Cette grille contient des caracteres * 
a I'endroit ou les lettres aleatoires 
serontplacees. 

















WordSearch.swf 








* N 






U 


R 


A 


N 


U 


s 




ft 






* 


SATURN 


* M 


E 


* 


* 


* 






* 


* 


ft 


* 


ft 


ft 


ft 


MARS 


* A 


* 


P 


P 


L 


U 


T 


0 














PLUTO 


* R 


* 


* 


T 


* 


* 


* 


* 


* 


ft 


* 




ft 


R 


NEPTUNE 


M S 








U 






ft 






* 






E 


URANUS 


E * 


* 


* 


* 


V 


N 


ft 


* 


* 


ft 


ft 


ft 


ft 


T 


VENUS 


R * 


* 


* 


* 


E 


* 


E 


* 


* 


* 


* 


* 


* 


I 


JUPITER 


C * 


* 




* 


N 




* 






ft 




ft 




P 


MERCURY 


U * 








U 




E 




ft 








N 


U 


EARTH 


R * 


* 


* 


* 


S 




* 


A 


* 


ft 




R 


ft 


J 




Y * 


* 


* 


* 


* 


* 


ft 


ft 


R 


ft 


U 


ft 


ft 


* 




* * 


* 




* 






* 




* 


T 




* 




ft 




* ft 


* 


• 




* 


* 




* 


A 


ft 


H 


ft 


ft 


ft 






* 




* 








S 












ft 




* * 


* 


* 


* 


* 


* 


ft 




ft 


ft 




ft 









Les boucles suivantes examinent chacune des caracteres dans la grille et remplacent le* par une lettre 
aleatoire : 

// Remplir le reste de la grille avec des lettres aleatoires 
for(x=0;x<puzzleSize;x++) { 
for(y=0;y<puzzleSize;y++) { 
if (letters[x] [y] == "*") { 

letters [x] [y] = St ring. f ronCharCode( 65+Math. floor (Math. random ()*26) ) ; 

} 

} 
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Lorsque la fonction piaceLetters a termine, el le retourne son tableau afin que les sprite puissent 
etrecrees : 

return letters; 

} 

Interaction de I'utilisateur 

Nous utiliserons des ecouteurs pour surveiller trois actions desouris : I e die, lesurvol d'un nouveau 
sprite et le relachement du bouton de la souris. 

Clic de souris 

Lorsque lejoueurcliquesurunelettre, la position sur la grilleestdetermineeetplacee dans startPoint. 

En OUtre, dragMode est positionne a "drag". 

La fonction findGridPoint retourne un Point avec la position de la lettre dans la grille. Nous 
construirons cette fonction plus tard : 

// Le joueur clique sur une lettre pour commencer 
public function clickLetter(event:MouseEvent) { 

var letter:String = event. currentTarget.getCnildAt(0) .text; 

startPoint = findGridPoint(event.currentTarget) ; 

dragMode = "drag" ; 

} 

Glissement du curseur 

A chaquefois que le curseur passe sur une lettre a I'ecran, la fonction over-Letter suivante est appelee. 
E I le verifie cependant d'abord que dragMode vaut "drag". Le gros de la fonction ne s' execute done 
qu'unefois que le joueur a clique sur une lettre. 

L e point courant est stocke dans endPoint. M ai ntenant que nous avons un point de depart (startPoint) 
et de fin (endPoint), nous pouvons verifier la plage afin de voir si el le est valide. Nous supposerons 
qu'elle ne Test pas, en effacant le caique graphique outiinesprite en premier. S'il s'agit d'une plage 
valide, drawoutiine configure cependant le caique graphique outiinesprite avec une nouvelle ligne. 

En fin de compte, le surlignement est supprime et redessine a chaque fois que le curseur change de 
lettre: 

// Le joueur selectionne des lettres 
public function overLetter(event :MouseEvent) { 
if (dragMode == "drag") { 

endPoint = findGridPoint (event. currentTarget ) ; 

// Si la plage est valide, afficher la ligne de surbrillance 
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outlineSprite. graphics. clear( ) ; 

if (isValidRange(startPoint,endPoint) ) { 

drawOutline (outlineSprite , startPoint , endPoint , 0XFF0000) ; 

} 

} 

} 

Relachement de la souris 

Lorsque lejoueur rel ache la souris sur une I ettre, dragMode se voit attribuer la valeur "none" et la ligne 
desurbrillance est effacee. Ensuite, si la plage est valide, deux fonctions sont appelees pour gerer la 
selection. 

La fonction getseiectedword recupere la plage et retourne les lettres qu'elle contient. Ensuite, la 
fonction cneckword verifie si ce mot se trouve dans la liste et agit en fonction : 

// Bouton de souris relache 
public function mouseRelease(event:MouseEvent) { 
if (dragMode == "drag") { 

dragMode = "none" ; 

outlineSprite. graphics. clear( ) ; 

// Recuperer le mot et le verifier 
if (isValidRange(startPoint, endPoint) ) { 
var word = getSelectedWord( ) ; 

checkWord(word) ; 

} 

} 

} 

Fonctions utilitaires 

La fonction findGridPoint prend un sprite de I ettre et determine I' emplacement auquel il se trouve. 
Comme les Sprite sont crees de toutes pieces, ils ne peuvent pas se voir attribuer des variables 
dynamiques. Nous ne pouvons done pas stacker les valeurs x et y avec chacun des sprite. 

Au lieu de cela, nous examinerons done simplement la grille et trouverons dedans I' element qui 
correspond au Sprite : 

// Lorsque le joueur clique sur une lettre, trouver et retourner 1' emplacement x et y 
public function findGridPoint(letterSprite:Object) :Point { 

// Parcourir en boucle tous les sprites et trouver celui-ci 
for(var x:int=0;x<puzzleSize;x++) { 
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for(var y:int=0;y<puzzleSize;y++) { 
if (grid[x][y] == letterSprite) { 
return new Point(x,y); 

} 

} 

} 

return null; 

} 

Pour determiner si deux points dans le puzzle constituent une plage valide, nous realisons trois tests. 
S'ils se trouvent tous deux sur la meme ligne ou la meme colonne, la plage est valide. Le troisieme 
test examine la difference x et y. En cas d'egalite en valeur absolue, la selection est une diagonale a 
45 degres : 

// Determiner si la plage se trouve dans la meme ligne, colonne ou dans une diagonale 
a 45 degres 

public function isValidRange(p1 ,p2:Point) :Boolean { 
if (pl.x == p2.x) return true; 
if (pl.y == p2.y) return true; 

if (Math.abs(p2.x-p1 .x) == Math.abs(p2.y-p1 .y) ) return true; 
return false; 

} 

Le trace de la ligne de surbrillance derriere les lettres aurait du etre I'un des problemes les plus 
epineux a resoudre de ce jeu. Oui, mais on a parfois de la chance. Grace aux extremites arrondies 
uti I i sees par defaut pour les traits, il suffit de tracer une ligne d'un emplacement a I' autre, de la rendre 
suffisamment esthetique et epaisse pour obtenir un trait de surbrillance d'excellente apparence. 

Vous remarquerez qu'il est necessaire de compenser pour placer les extremites de la ligne au centre 
des lettres. Les emplacements des lettres correspondent au coin superieur gauche du TextFieid et 
done au coin superieur gauche du sprite des lettres. La moitie de la constante spacing est done 
aj outee afin de compenser ce decal age : 

// Tracer une ligne epaisse d'un emplacement a un autre 
public function draw0utline(s:Sprite,p1 ,p2:Point,c:Number) { 

var off:Point = new Point(offset.x+spacing/2, offset. y+spacing/2) ; 

s .graphics . lineStyle (outlineSize , c) ; 

s. graphics. moveTo(p1 . x*spacing+off .x ,p1 . y*spacing+off .y) ; 
s .graphics . lineTo (p2 . x*spacing+of f . x , p2 . y*spacing+of f . y ) ; 

} 
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Gerer les mots trouves 

Lorsque le joueur termine une selection, la premiere chose a faire est de creer un mot a parti r des 
lettres de la selection. Pour cela, nous allons determiner les valeurs dx et dy entre les deux points, ce 
qui nous aide a selectionner les lettres dans la grille. 

En commencant a parti r de startPoint, nousavancons une lettrea lafois. Si la valeur dx est positive, 
chaque etape implique d'avancer d'une colonne vers la droite. Si el I e est negative, chaque etape 
avance d'une colonne vers la gauche. Idem pour dy vers le haut et vers le bas. Ce dispositif nous 
guidera dans les huit directions possibles d'une selection valide. 

Le resultat final correspond a une chame de lettres, les memes que eel I es qui apparaissent dans la 
selection a I'ecran : 

// Trouver les lettres selectionnees en fonction des points de depart et de fin 
public function getSelectedWord( ) :String { 

// Determiner dx et dy de la selection et longueur du mot 
var dx = endPoint.x-startPoint.x; 
var dy = endPoint.y-startPoint.y; 

var wordLength: Number = Math. max(Math. abs(dx) , Math. abs(dy) )+1 ; 

// Recuperer chaque caractere de la selection 

var word: String = " " ; 

for(var i:int=0;i<wordLength;i++) { 

var x = startPoint. x; 

if (dx < 0) x -= i; 

if (dx > 0) x += i; 

var y = startPoint. y; 

if (dy < 0) y -= i; 

if (dy > 0) y += i; 

word += grid[x] [y] .getChildAt(0) .text; 

} 

return word; 

} 

U ne fois que nous connaissons le mot que le joueur pense avoir trouve, nous pouvons parcourir en 
boucle le tableau usedwords et comparer les lettres trouvees avec les mots de la liste. Nous devons les 
comparer de gauche a droite et de droite a gauche. Nous ne souhaitons pas imposer au joueur qu'il 
selectionne la premiere lettre en premier, notamment parce que nous allons afficher certains mots en 
les renversant dans la grille. 
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Pour inverser un mot, I'un des moyens rapides consistea utiliser split pour convertir la chaineen un 
tableau puis reverse pour inverser I e tableau et join pour revenira unechame. split et join prennent 
"" (une chaine vide) comme separateur, car nous souhaitons que chaque caractere soit son propre 
element dans I e tableau : 

// Comparer le mot a la liste de mots 
public function checkWord (word: String) { 

// Parcourir en boucle les mots 

for(var i:int=0;i<usedWords.lengtn;i++) { 

// Comparer le mot 

if (word == usedWords [i] .toUpperCase() ) { 
foundWord(word) ; 

} 

// Comparer le mot inverse 

var reverseWord: String = word. split (""). reverse ( ). join( "") ; 
if (reverseWord == usedWords [i] .toUpperCase( ) ) { 
foundWord( reverseWord) ; 

} 

} 

} 

Lorsqu'un mot esttrouve, nous souhaitons tracer un trait permanent et supprimer le mot de la liste de 
droite. 

La fonction drawoutiine peut tracer la ligne sur n'importe quel Sprite. Nous lui ferons done cette 
fois tracer la ligne sur oidoutiinesprite (en utilisant une teinte de rouge plus claire). 

Ensuite, nous parcourons en boucle les objets TextFieid dans wordsSprite et examinons la propriete 
text de chacun d'entre eux. Si el I e correspond au mot, la couleur du TextFieid est remplacee par un 
grisclair. 

Nous augmenterons egalement numFound et appellerons endGame si tous les mots ont ete trouves : 

// Mot trouve, supprimer de la liste, creer trait de surbrillance permanent 
public function foundWord(word:String) { 

// Tracer le trait de surbrillance dans le sprite permanent 
drawOutline (oldOutlineSprite , startPoint , endPoint , 0xFF9999) ; 
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// Trouver le champ texte et le passer en gris 
for(var i:int=0;i<wordsSprite.numCnildren;i++) { 

if (TextField(wordsSprite.getChildAt(i) ) .text .toUpperCase( ) == word) { 
TextField(wordsSprite.getChildAt(i)) .textColor = OxCCCCCC; 

} 

} 



// Voir si tous les mots ont ete trouves 
numFound++; 

if (numFound == usedWords. length) { 
endGame( ) ; 

} 

} 

La fonction endGame conduit simplement le scenario principal a I'image gameover. Nous souhaitons 
non pas encore effacer les sprites du jeu mais plutot les faire apparaitre sous I e message "Game Over" 
et le bouton Play Again. 

Pour mieux faire ressortirces elements, je les ai places surun rectangle uni. Sanscela, ilssefondraient 
avec la grille de lettres (voir Figure 9.6). 



Figure 9.6 

Le rectangle permetde 
mieux faire ressortir le texte 
Game Over et le bouton. 
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public function endGame() { 
gotoAndStop( "gameover" ) ; 

} 

Lebouton Play A gai n appelle cleanup et conduit a I' image play pour redemarrer lejeu. Commenous 
avons stocke tous nos sprite dans le seul sprite gameSprite, nous pouvons nous debarrasser de ce 
dernier pour effacer la grille : 

public function cleanUpO { 
removeChild (gameSprite) ; 
gameSprite = null; 
grid = null; 

} 



Modifier le jeu 

L'interet du joueur pour lejeu peut etre fortement lie a son interet pour les mots. Vous pouvez creer 
un puzzle sur n'importe quelle themati que. II suffit simplement d'une liste de mots separes par des 
virgules. 

En fait, vous pouvez utiliser la technique du Chapitre 2 pour I'indusion de variables dans le code 
HTM L d'une page Web afin de passer une liste de mots courte. Un uniquejeu de mots meles pourrait 
alors etre utilise dans plusieurs pages de votre site avec une liste de mots differente. 

Vous pouvez egalement ajuster aisement les dimensions du puzzle ainsi que la tai 1 1 e et I ' espacement 
des lettres, par exemple afin de proposer des mots meles pour les enfants. 

L'autre moyen d'obtenir des listes de mots consiste a les importer a partir de fichiers externes. Nous 
verrons comment importer des donnees externes au chapitre suivant. 




Questions et reponses 
quiz et jeux de 
culture generale 

Au sommaire de ce chapitre : 

• Stacker et recuperer des donnees de jeu 

• Quiz de culture generale 

• Quiz version Deluxe 

• Quiz en images 
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Differents jeux peuvent etre utilises a differentes fins, mais il existe peu de jeux qui puissent etre 
utilises pour desbesoinsaussi differents que les jeux dequiz.Vous pouvez creerun quiz sur quasi ment 
n'importequel sujet eta n'importequel niveau de difficulty La partiela plus difficile pour la creation 
dejeux de quiz consiste a les rendre interessants. A pres tout, une serie de questions a choix multiples, 
ce n'est rien de plus qu'un test. Or peu de gens sont naturellement end ins a passer des tests. 

Les jeux de quiz et de culture generale s'appuient sur des donnees. lis se servent de questions et de 
reponses comme elements de jeu principaux. Ces donnees texte sont de preference stockees dans des 
fichiers externes et importees de maniere dynamique dans le jeu. Nous examinerons les strategies 
possibles pour eel a avant d'etudier les jeux eux-memes. 

Aprescela, nous creerons un jeu dequiz qui recupere un fichier texte externeet utilise les questions 
et reponses qu'il contient comme donnees du jeu. N ous ferons ensuite un pas de plus et utiliserons des 
images externes dans un jeu dequiz en images. 



Stocker et retrouver des donnees de jeu 



Codes sources 
(|[|)T£c http://flashgameu.com 

A3G PU 10_X M L E xamples.zip 



Les jeux de culture generale requierent une liste de questions et de reponses. Le meilleur moyen de 
faire venir ces donnees au debut d'un jeu consiste a les lire dans un fichier X M L. 



F lash prefere le XM L aux autres types de fichiers de donnees externes. F lash ne peut en realite 
lire que deux types de fichiers : le XM L et une liste d'attrlbutlons de variables. Le second 
format n'est veritablement utile que pour les petites taches. Le XM L peut etre utilise pour de 
tres grandes bases de donnees s'il le faut. 



Comprendre les donnees XML 

XML est I'acronyme d'eXtensible Markup Language (langage de balisage extensible). Son role 
consiste a proposer un format simple pour I'echange d' informations entre systemes. 

Si vous n'avez jamais vu de fichier XML auparavant mais que vous ayez travaille en HTM L, vous 
remarquerez une similarity Les signes inferieur a et superieur a sont utilises en X M L pour entourer 
des mots-cles de definition appeles balises. 
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Observez I'exemplesuivant : 

<trivia> 

<item category=" Entertainment "> 

<question>Who is known as the original drummer of the Beatles?</question> 
<answers> 

<answer>Pete Best</answer> 
<answer>Ringo Starr</answer> 
<answer>Stu Sutclif f e</answer> 
<answer>George Harrison</answer> 
</answers> 

<hint>Was fired before the Beatles hit it big.</hint> 

<fact>Pete stayed until shortly after their first audition for EMI in 1962, but 
was fired on August 16th of that year, to be replaced by Ringo Starr. </fact> 

</item> 

</trivia> 

Ce fichier XML represente un quiz a une question. Les donnees suivent un format imbrique : des 
balises sont placees a I'interieur d'autres balises. Par exemple, le document entier correspond a un 
objet <trivia>. A I'interieur de cet objet figure un <item>. Dans cet objet <item> figure une 
<question>, un objet <answers> avec quatre objets <answer>, un objet <hint> et un objet <fact>. 



Les objets individuels des documents XM L sont aussi appeles des nceuds. U n noeud peut con- 
tend simplement des donnees ou avoir plusieurs nceuds enfants. Certains nceuds se voient 
associer des donnees supplementaires, comme le nceud item, qui dans cet exemple possede 
une category. On les a ppel I e des attributs. 

Vous pouvez placer un document XML directement a I'interieur de votre code ActionScript 3.0. Par 
exemple, I'animation d'exemple xmlExample.fla en contient un dans le script de I'image 1 : 

var nyXML:XML = 
<trivia> 

<item category=" Entertainment "> 

<question>Who is known as the original drummer of the Beatles?</question> 
<answers> 

<answer>Pete Best</answer> 
<answer>Ringo Starr</answer> 
<answer>Stu Sutclif fe</answer> 
<answer>George Harrison</answer> 
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</answers> 

<hint>Was fired before the Beatles hit it big.</hint> 

<fact>Pete stayed until shortly after their first audition for EMI in 1962, but 
was fired on August 16th of that year, to be replaced by Ringo Starr. </fact> 

</item> 

</trivia> 

Vous remarquerez qu'aucun guillemet ni parenthese n'est requis autour des donnees XML. Elles 
peuvent tout simplement figurer a I'interieur du code ActionScript 3.0 (vous imaginez cependant 
combien cela peut devenir incommode si les donnees deviennent plus longues). 

M aintenant que nous avons des donnees XML dans un objet XML, nous pouvons nous amuser a en 
extraire des informations. 



La gestion des donnees XM L a ete considerablement amelioree avec ActionScript 3.0. Aupa- 
ravant, il fallait utiliser des instructions plus complexes pour trouver un noaud speclfique 
dans les donnees. Le nouvel objet xml dans ActionScript 3.0 differe de I'objet xml sous 
ActionScript 2.0, cequi signifie que vous ne pouvez pas effectuer la conversion directe del'un 
a I'autre. Faites done attention aux anciens exemples de code qui pourraient toujours se 
trouver au format ActionScript 2.0. 



Pour obtenir le noaud question dans les donnees, vous procederiez ainsi : 

trace(myXML. item. question) ; 

Voila qui est plutot simple. Pour obtenir un attri but, il suffit d'utiliser la fonction attribute : 
trace(myXML. item. attribute( "category" ) ) ; 

Le symbole @ peut etre utilise comme raccourci pour obtenir I 'attri but. Au lieu de myxML.aem 

.attribute)" category" ) , VOUS pOUVeZ done aUSSI ecrire myXML . item .^category. 

Dans le cas du nceud <answers>, il y a quatre reponses (answer). Celles-ci peuvent etre traitees 
comme un tableau en y accedant avec des crochets : 

trace(myXML. item. answers. answer[1 ] ) ; 

L'obtention du nombre de noeuds a I'interieur d'un autre nceud, par exemple du nombre de nceuds 
<answer>, est un peu moins evidente. Vous devez proceder de la maniere suivante : 

t race (myXML. item. answers. child ( "*" ) . length ( ) ) ; 

La fonction child retourneun enfant d'un nceud specifieparunechameou un nombre. En revanche, 
"*" retourne tous les nceuds enfants. length ( ) fournit ensuite le nombre de nceuds enfants. Si vous 
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essayez simplementd'obtenir la longueur d'un nceud avec length ( ), vousobtiendrez leresultat 1, car 
un nceud fait toujours un de longueur. 

M aintenant que vous savez comment trouver votre chemin dans les donnees XML, commengons a 
gerer des documents XML plus grands importes depuis des fichiers externes. 

Importer des fichiers XML externes 

Lorsque le X M L est enregistre sous forme defichier, il est semblable a un fichier de texte brut. Vous 
pouvez d'ai I leur ouvri r vos fichiers X M L avec pratiquementn'importequel editeurde texte. Lefichier 
trivial.xml est un fichier court contenant simplement dix elements de quiz. 

Pour ouvrir et lire un fichier externe, nous al Ions utiliser les objets URLRequest et uRLLoader. Nous 
definirons ensuite un evenement a declencher lorsque lefichier aura ete charge. 

L'exempledecodesuivantpresenteunfragmentdecodedechargementX M L provenantdexmlimport. 
as. Lafonction constructeurcreeun objet URLRequest avec lenomdufichierXM L. Ensuite, URLLoader 
lance letelechargement. 



Vous pouvez passer n'importe quelle URL valide a URLRequest. L'usage d'un simple nom de 
fichier comme nous I'avons fait ici i mpl i que que le fichier se trouve aux cotes de I'animation 
F lash SWF, dans le meme dossier. Vous pouvez cependant separer un sous-dossier ou meme 
utiliser . . / et d'autres fonctionnal ites de chemlnement pour indlquer une U RL relative. Vous 
pouvez enfin aussi specifier des U RL absolues, qui fonctlonnent aussi bien sur le serveur et 
lors du test local sur votre ordinateur. 



Nous al Ions attacher un ecouteur au URLLoader. Cet ecouteur appellera xmiLoaded lorsque lefichier 
aura er.ecompletern.ent telecharge : 

package { 

import flash. display.*; 
import flash. events.*; 
import flash. net. URLLoader; 
import flash. net. URLRequest; 

public class xmlinport extends MovieClip { 
private var xmldata:XML; 

public function xmlinport () { 
xmldata = new XML( ) ; 

var xnlURL:URLRequest = new URLRequest( "xmltestdata.xml" ) ; 
var xmlLoader: URLLoader = new URLLoader(xmlURL) ; 
xmlLoader . addEventListener( Event .COMPLETE, xmiLoaded) ; 

} 
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La fonction xmiLoaded prend les donnees chargees de event .target, data et les convertit en X M L 
pour les stacker dans xmidata. En guise de test, plagons la seconde response a la premiere question 
dans la fenetre Sortie : 

function xmll_oaded( event: Event) { 

xmidata = XML(event .target .data) ; 
trace(xmldata. item. answers. answer[1 ] ) ; 
trace("Data loaded. ") ; 

} 

} 

} 




Les objets XM L, comme les tableaux, sont indices a zero. La premiere reponse du precedent 
exemple se trouve done a la position 0 et la seconde, a la position 1. 



Capturer les erreurs de chargement 

Puisqu'on n'est jamais a I'abri d'une erreur, il est toujours utile de mettre en place un mecanisme de 
verification des erreurs. Vous pouvez le faire en ajoutant un autre evenement a uRLLoader : 

xmlLoader.addEvent Listener (IOErrorEvent . IO_ERROR,xmlLoadError) ; 

Ensuite, vous pouvez obtenir le message d'erreur de I'evenement retourne a xmiLoadError : 

function xmlLoadError(event : IOErrorEvent) { 
trace(event.text) ; 

} 

Je n'indiquerai cependant pas a I'utilisateur final le message d'erreur verbatim. Par exemple, si vous 
supprimez simplement le fichier et essayez de lancer I 'animation, vous obtenez I 'erreur suivantesui vie 
par le nom de fichier : 

Error #2032: Stream Error. URL: file: 

Ce n'est pas le genre de message d'erreur que vous souhaiterez presenter au joueur. II vaudrait mieux 
quelque chose du genre "Unable to load game file" (le fichier du jeu n'a paspu etre charge). 

Vous savez maintenant comment recuperer des documents XML plus imposants, comme ceux dont 
vousaurez besoin pour creer des jeux de culture general e. 
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Quiz de culture generale 

Codes sources 

^)t>c http://flashgameu.com 

A3GPU 10 TriviaGame.zip 



Le quiz de culture generale aussi baptise Trivia est devenu pour la premiere fois une forme de 
divertissement dans les annees 1950, avec I'apparition de la television. Les shows televises de quiz 
sontdevenusdeplusen plus populairesau fil desans. 

Dans les annees 1980, les jeux de societe comme le Trivial Pursuit ont rencontre un franc succes et 
permi s aux gens de j ouer a des j eux de cul ture general e en pi us de I es regarder. C es j eux sont rapi dement 
devenus disponibles sur les ordinateurs et sur Internet. 

Lesjeux de culture generale sont un bon moyen dedecliner des jeux surtousles sujets.Votre site Web 
concerne les pi rates ? Creez unjeude quiz sur les pi rates. Vouscreez un CD-ROM pour une conference 
a Francfort?Ajoutez unjeu dequiz avec des faits interessants concernant la ville. 

Creons d'abord unjeu dequiz simple, puisajoutons des gadgets au fur eta mesure. 
Concevoir un jeu de quiz simple 

Lejeu dequiz el ementai re correspond simplement a une seriede questions. Lejoueur lit une question, 
puis selectionne une reponse parmi plusieurs possibles. Les joueurs ont un point ou une forme de 
recompense en cas de bonne reponse. Ensuite, lejeu passe a la question suivante. 

Nousconstruironscejeu comme tous les autres : avec trois images, I'action prenant pi ace dans I' image 
du milieu. Dans le cas present, Taction designe une serie d'elements de texte et de boutons. Nous 
commencerons par demander au joueur s'il est pret a commencer. II cliquera sur un bouton pour 
demarrer (voir Figure 10.1). 

Lejoueur se voit ensuite presenter une question et quatre reponses. II doit choisir une reponse. Si la 
reponse qu'il choisit est juste, le message "You Got It!" (trouve!) apparait. En cas d'erreur, il obtient 
le message "Incorrect". 

Dans un cas comme dans I'autre, lejoueur voit apparaitre un autre bouton sur lequel il doit cliquer 
pour passer a la question suivante. 

Ouvrez TriviaGamefla et essayez de jouer afin de mieux comprendre le fonctionnement du jeu. A 
present, construisons lejeu. 
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Figure 10.1 

Au debut du jeu, lejoueur voit 
apparaitre un bouton sur lequel il 
doit cliquer avant d'obtenir la 
premiere question. 



Ify TriviaGame.swf 



Fichier Affichage Controle Deboguer 



The Trivia Quiz 



Get ready for the first question! 



Number of Questions: 0 Number Correct: 0 



Configurer I'animation 

Le fichier d'animation n'utilise que deux images au lieu des trois que nous avons eu I'habitude 
d'utiliser. Nousaurons besoin d'un nouvel element dans la bi bliotheque de notre animation pour creer 
le jeu de quiz. II s'agira d'un cercle contenant une lettre et qui s'affichera a cote d'une reponse. La 
Figure 10.2 presente ceclip. 

Le champ texte dans le clip circle est appele letter. Nous en creerons quatre comme celui-la, un 
pour chaque reponse, et les placerons a cote dutextede la reponse. La lettre sera chaquefoisdifferente : 
A, B, C ou D. 



Si vousobservezattentivementla Figure 10.2, vous remarquerez que le point d'alignement du clip 
est decale vers le haut et la droite. Ce point correspond a I'emplacement 0,0 du champ texte qui 
ira a cote. Nous pouvonsainsi attribuer a circle etau champ texte de reponse le meme emplace- 
ment et les fa ire apparaitre cote a cote au lieu de I'un sur I'autre. 



La meme techni que de I' image d'arri ere-pl an et du champ texte sera util isee dans leclip GameButton. 
Cela nous permettra d'utiliser le meme clip de bouton pour differents boutonsdans lejeu. 

L' animation contient egalement des graphismes d'arri ere-pl an, dont un titreet des lignes horizontales 
(voir Figure 10.1). 
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Figure 10.2 

Leclip Circle contient un champ 
texte dynamique et un cercle 
d'arriere-plan. 
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Configurer la classe 

Commecejeu charge lesdonneesdu quiz a parti rd'un fichier externe, nousavons besoin decertaines 
parties de la bibliothequefiash.net pour utiliser les fonctions uRLLoader et uRLRequest : 

package { 

import flash. display.*; 
import flash. text.*; 
import flash. events.*; 
import flash. net. URLLoader; 
import flash. net. URLRequest; 

Lejeu utilisera un certain nombrede variables. Nousplaceronslesdonneeschargeesdepuis le fichier 
dans dataxwiL. Nous avons egalement differents formats texte et des references a des champs texte 
dynamiques que nous allons creer : 

public class TriviaGame extends MovieClip { 

// Donnees de question 
private var dataXML:XML; 

// Formats texte 

private var questionFornat:TextFornat; 
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private var answerFormat:TextFormat; 
private var scoreFormat:TextFormat; 

// Champs texte 

private var messageField:TextField; 
private var questionField:TextField; 
private var scoreField:TextField; 

L'idee pour les sprites est d'avoir un gameSprite qui contient tout. A I'interieur, nous aurons un 
questionsprite contenant tous les elements d'une unique question dequiz : un champ texte pour la 
question et d'autres sprites pour les reponses. Les answersprites contiendront les champs texte et les 
clips circle pour chaque reponse, qui seront stockes dans leur propre sprite. N ous n'avons cependant 
pas besoi n d' une variable de classe pour les references car i Is seront proprement stockes dans le sprite 

answerSprites. 

Nous aurons aussi une reference pour le bouton GameButton, afin que lorsque nouscreons un bouton 
nous puissions utiliser cette reference pour le supprimer : 

// Sprites et objets 
private var gameSprite: Sprite; 
private var questionSprite:Sprite; 
private var answerSprites:Sprite; 
private var gameButton:GameButton; 

Pour tenir le registre de I'etat du jeu, nous avons besoin de questionNum, qui memorise la question a 
laquellenousnoustrouvons, denumCorrect,qui consignelescoredujoueur,etdenumQuestionsAsked, 
qui concerne egalement la determination du score du joueur. 

Pour memoriser la question posee, nous placerons les quatre reponses dans un ordre quelconque dans 
le tableau answers. Avant de les melanger, nous tiendrons cependant note de la premiere reponse 
d'origine, quenoussavonscorrespondrea la bonne reponse, dans la variable correctAnswer : 

// Variables d'etat du jeu 
private var questionNum :int; 
private var correctAnswer:String; 
private var numQuestionsAsked:int; 
private var numCorrect:int; 
private var answers:Array; 

Lafonction constructeur creera le gameSprite puis configurera les trois objets TextFormat : 
public function startTriviaGame( ) { 

// Creer le sprite du jeu 
gameSprite = new Sprite(); 
addChild(gameSprite) ; 
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// Definition des formats texte 

questionFormat = new TextFornat( "Arial" ,24,0x330000, true, false, false, null, null, "center") ; 
answerFormat = new TextFormat( "Arial" ,18,0x330000, true, false, false, null, null, "left"); 
scoreFormat = new TextFormat( "Arial" ,18,0x330000, true, false, false, null, null, "center") ; 



II n'existe pas de moyen de dupliquer un objet TextFormat. Si vous tapez simplementanswer- 
Format = questionFormat puis apportez une modification a I'un des deux formats, I'autre 
change egalement. II est done important de creer un nouvel objet TextFormat pour chacune 
des variables. 

Vous pouvez en revanche definir une variable tempora ire comme myFont en lui attribuant une 
valeur telle que "Arial" puis utiliser myFont a la place de "Arial" dans chacune des declara- 
tions TextFormat. Vous pourrez alors modifier la police utilisee dans le jeu en operant un 
unique changement a un seul emplacement du code. 




Lorsquelejeu demarre, les champs texte scoreFieid etmessageFieid sontcrees. Au lieu de creer un 
TextFieid, de I 'aj outer avec addCniid et de positionner chacune de ses propriet.es pour chacun des 
elements de texte requis, nous creons une fonction utilitaireappelee createText qui se charge decette 
tache pour nous en une ligne de code. Par exemple, le messageFieid contiendra le texte "Loading 
Questions ..." enutilisantleformatquestionFormat.il le place dans le gamesprite a 0,50 avec une 
largeur de 550. Nous examinerons createText plustard : 

// Creer les champs texte du score et du message de depart 

scoreFieid = createText ( " " .questionFormat, gameSprite, 0,360, 550) ; 

messageFieid = createText ( "Loading Questions. .." , questionFormat, gameSprite, 0,50,550 

); 

U ne fois que I'etat du jeu est defini, nousappelonsshowscore pour placer le texte du score en basde 
I'ecran. Nousetudieronscela plustard egalement. 

Nousappelons xmiimport pour recuperer les donneesdu quiz : 

// Configuration de I'etat et chargement des questions 

questionNum = 0; 

numQuestionsAsked = 0; 

numCorrect = 0; 

showScore( ) ; 

xmiimport () ; 

} 

Le texte "Loading Questions ..." apparaitra a I'ecran ety restera jusqu'a ceque le documentX M L aitete 
lu. L ors du test de I' animation, cette etape peut prendre moins de 1 seconde. U ne fois que le jeu se trouvera 
sur leserveur, elledevrait etre un peu plus longue, selon la reactivitede la connexion du joueur. 
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Charger les donnees du quiz 

Les questions sont chargees en utilisant des fonctions analogues a I'exemple du debut de ce chapitre. 
Pour ne pas encombrer le code de cet exemple, aucune verification d'erreur n'est operee. Le fichier 
trivial.xml contient dix elements : 

// Lancer le chargement des questions 
public function xnlImport( ) { 

var xmlURL:URLRequest = new URLRequest( "trivial .xml") ; 

var xmlLoader:URLLoader = new URLLoader(xmlURL) ; 

xmlLoader.addEvent Listener (Event .COMPLETE, xmlLoaded) ; 

} 

U nefois le chargement termine, les donnees sont placees dans dataXML. Ensuite, I e message texte qui 
affichait "Loading Questions ..." est supprime. II est remplace par un nouveau message indiquant 
"Get ready for the first question!" (preparez-vous pour la premiere question !). 

Une autre fonction utilitaire est appelee pour creer un GameButton. Une etiquette de bouton "goi 11 est 
placeea I'interieur du bouton. Nous examinerons snowGameButton un peu plus loin dans ce chapitre : 

// Questions chargees 

public function xnlLoaded(event:Event) { 

dataXML = XML(event. target. data) ; 

gameSprite. renoveChild(messageField) ; 

messageField = createText( "Get ready for the first question! " ,questionFormat, 

gameSprite, 0,60, 550) ; 

showGaneButton("G0! "); 

} 

Lejeu attend maintenant que lejoueur clique sur le bouton. 
Texte du message et bouton de jeu 

Plusieurs fonctions utilitaires sont requises dans ce jeu pour creer des champs texte et des boutons. 
El les permettent de reduire sensiblement la longueur du code. Nous n'aurons pas a repeter les memes 
reglages TextFieid, addChiid, x et y a chaque fois que nous creons un champ texte. 

createText s'occupe de recuperer une serie de parametres et de creer un nouvel objet TextFieid. 
Ellepositionnelesvaleursx, y, width etTextFormat en leur attri buant les valeurs passeesen parametre. 
E I le definit egalement des parametres de constante comme multiline et wordwrap qui seront les 
memes pour tout ce que nous creons dans lejeu. 

L'alignement du texte dans le champ variera : il sera parfois centre et d'autres fois justifie a gauche. 
Ce reglage est inclus dans TextFormat. Nous souhaitons cependant attri buer la valeur qui convient a 
la propriete autosize du champ ; nous realisons done un test et attribuons a autosize la valeur 

TextFieldAutoSize.LEFT OU la valeur TextFieldAutoSize . RIGHT en fonction. 
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Pour finir, nous definissons le texte du champ et ajoutons ce dernier au sprite passe dans un autre 
parametre. Le Text Field est retourne par la fonction ; nous pouvonsdonc definir une variable pour le 
referencer dont nous nous servirons pour le supprimer par la suite : 

// Creer un champ texte 

public function createText(text:String, tf :TextFormat, 
s:Sprite, x,y: Number, width:Number) : TextField { 

var tField: TextField = new TextFieldO; 

tField.x = x; 

tField. y = y; 

tField. width = width; 

tField. def aultTextFormat = tf; 

tField. selectable = false; 

tField. multiline = true; 

tField. wordwrap = true; 

if (tf. align == "left") { 

tField. autoSize = TextFieldAutoSize.LEFT; 

} else { 

tField. autoSize = TextFieldAutoSize. CENTER; 

} 

tField. text = text; 
s.addChild(tField); 
return tField; 

} 

Contrairement aux autres champs texte, le champ scoreFieid nesera pas cree, supprime puis recree 
durantlejeu. II sera simplement cree une fois et place en bas del'ecran. Ensuite, nous utiliserons 
showscore pour mettre a jour le texte dans le champ : 

// Met a jour le score 

public function showScore() { 

scoreFieid. text = "Number of Questions: "+numQuestionsAsked+" Number Correct: 
"+numCorrect; 

} 

De la meme maniere que createText nous permet de creer differents types de champs texte avec une 
fonction, snowGameButton nous permet de creer differents boutons. Elle prend buttonLabei en 
parametre et s'en sert pour definir le texte de I 'etiquette a I'interieur du bouton. 

La variable gameButton est deja une propriete de classe. Elle sera done disponible par la suite pour 
removeChiid.Nousajouteronsunecouteurevenementielaceboutonafinqu'il appellepressGameButton 
lorsquelejoueur clique dessus. Cette action servira a passer a I'etape suivante du jeu : 

// Demander au joueur s'il est pret pour la question suivante 
public function showGameButton(buttonLabel:String) { 
gameButton = new GameButton( ) ; 
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gameButton. label. text = buttonLabel; 

gameButton.x = 220; 

gameButton. y = 300; 

gameSprite . addChild (gameButton ) ; 

gameButton. addEventListener(MouseEvent. CLICK, pressedGameButton ) ; 



Avec la programmation dehauten bas, il est necessairede tester chaque fragment decode a 
mesure que vous I'ecrivez. M alheureusement, I'exemple de code precedent genere une erreur 
parce que pressedGameButton n'existe pas encore. A ce stade, il m'arrive generalement de 
creer unefonction pressedGameButton factice qui ne contient pas de code. Cela me permet de 
tester d'abord I'emplacement du bouton, avant d'avoir besoin de programmer la procedure 
qui survient lorsque le joueur clique sur le bouton. 



Passer a I'etape suivante 

Lorsque lejoueur clique sur un bouton, lejeu doit passer a I'etape suivante. La plupartdu temps, cela 
implique de presenter une nouvelle question, mais lorsqu'il n'y a plus de question la partie se 
termine. 

Pour commencer, nous devons supprimer la question precedente. S'il s'agit de la premiere question, 
questionspriten'aura pas encore etecree. Nous devons done verifier I'existencedequestionsprite 
etnele supprimer que s'il setrouvebien la : 

// Le joueur est pret 

public function pressedGameButton! event :MouseEvent) { 
// Supprimer la question 
if (questionSprite != null) { 

gameSprite . removeChild (questionSprite ) ; 

} 

D'autres choses doivent etre supprimees egalement. Le message et le bouton qui restent suite a la 
pause avant ou entre les questions sont supprimes : 

// Supprimer le bouton et le message 
gameSprite. removeChild(gameButton) ; 
gameSprite. removeChild (messageField) ; 

A present, nous devons determiner si toutes les questions ontete posees. Si c'estlecas, nouspassons 
directement a I'image gameover. L'ecran est deja vide car la question precedente, le message et le 
bouton ont ete supprimes. 
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Si les questions ne sont pas terminees, nous appelons askQuestion pour afficher la question suivante : 

// Poser la question suivante 

if (questionNum >= dataXML. child ("*" ) .length()) { 

gotoAndStop( "gameover" ) ; 
} else { 

askQuestion ( ) ; 

} 



Afficher les questions et les reponses 

La fonction askQuestion recupere la question suivante dans les donnees du quiz et I ' affiche. Elle 
pi ace tout cequ'ellecreedans le sprite questionsprite afin d'en faciliter la suppression par la suite. 
La Figure 10.3 presente I'ecran apres qu'une question a ete affichee. 



Figure 10.3 

La question et les quatre reponses 
sont affichees dans le sprite 
questionSprite, qui couvre 
I'essentiel du milieu de I'ecran. 



I Trivia Game .swf 



Fichier Aftichage Controle Oeboguer 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



(a) Stu Sutcliffe 

George Harrison 
(^C) Ringo Starr 

® 



Pete Best 



Number of Questions: 0 Number Correct: 0 



// Configurer la question 
public function askQuestion( ) { 

// Preparer nouveau sprite de question 

questionSprite = new Sprite(); 

gameSprite . addChild (questionSprite) ; 

La question elle-meme apparaitra dans un champ i sole vers le hautde I'ecran : 

// Creer le champ texte pour la question 

var question: String = dataXML.i tem[questionl\lum] .question; 

questionField = createText(question,questionFormat, questionSprite, 0,60, 550) ; 
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Avant de placer les reponses, nous devons les melanger. La premiere parmi les donnees d'origine 
correspond a la bonne reponse, aussi en stockons-nous une copie dans correctAnswer. E nsuite, nous 
appelons shuffieAnswers pour obtenir un tableau detoutes les reponses dans un ordre aleatoire : 

// Creer le sprite pour les reponses, obtenir la bonne reponse et melanger 
correctAnswer = dataXML. item[questionl\lum] .answers. answer[0] ; 
answers = shuffleAnswers(dataXML.item[questionNum] .answers) ; 

Les reponses se trouvent dans un sous-sprite de questionspnte appele answersprites. Un objet 
TextFieid et un objet circle sont crees pour chaque reponse. Les objets circle se voient tous 
attribuer des lettres differentes, deA a D. Les deux sont places au memeendroit, mais le clip circle 
a ete concu pour apparaitre a gauche de son point d'alignement, tandis que le texte apparaitra a 
droite. 

Le texte et circle seront tous deux livres dans un nouveau sprite i ndivi duel , lequel sprite se verra 
attribuer un ecouteur click afin de pouvoir reagir comme un bouton : 

// Placer chaque reponse dans un nouveau sprite avec une icone de cercle 

answerSprites = new Spritef); 

for(var i:int=0;i<answers.lengtn;i++) { 

var answer:String = answers[i]; 

var answerSprite:Sprite = new Sprite(); 

var letter:String = String. f romCharCode(65+i) ; // A-D 

var answerField:TextField = createText(answer,answerFormat,answerSprite,0,0,450) ; 

var circle:Circle = new Circled; // from Library 

circle. letter. text = letter; 

answerSprite.x = 100; 

answerSprite.y = 150+i*50; 

answerSprite.addChild(circle) ; 

answerSprite . addEvent Listener (MouseEvent . CLICK, clickAnswer) ; 
answerSprite.buttonMode = true; 
answerSprites . addChild ( answerSprite) ; 

} 

questionSprite . addChild (answerSprites ) ; 

} 



Pour convertir un nombre en une lettre, nous utilisons string. fromCharcode<65+i). 
Le caractere 65 produit A, le caractere 66 produit B, etc. 
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La fonction shuffieAnswers recupere en entree une XMLList correspondant au type de donnees 
retourne en demandant dataXML.item[questionNum] .answers. Elle parcourt les donnees en boucle 
en supprimant a chaque fois un element au hasard de la liste et en le placant dans un tableau. Elle 
retourne ensuite ce tableau de reponses trie de maniere aleatoire : 

// Recuperer toutes les reponses et les melanger dans un tableau 
public function shuffieAnswers (answers: XMLList) { 
var shuffledAnswers: Array = new Arrayf); 
while (answers .child( "*") .length( ) > 0) { 

var r:int = Math. floor(Math.random()*answers.child("*") .length))); 
shuffledAnswers. push (answers. answer[ r] ) ; 
delete answers. answer[r] ; 

} 

return shuffledAnswers; 

} 

Juger les reponses 

Toutes les fonctions considerees jusqu'ici s'occupaient de configurer lejeu. A present, lejoueurse 
voit enfin presenter la question (voir Figure 10.3). 

Lorsque le joueur clique sur I'une des quatre reponses, nous appelons ciickAnswer. Cette fonction 
s'occupe en premier lieu de recuperer le texte de la reponse selectionnee. L'objet TextFieid est le 
premier enfant de currentTarget. Nous recuperons done la valeur desa propriete text et la pi aeons 

dans selectedAnswer. 

Cette valeur est ensuite comparee avec eel le de correctAnswer que nous avons stockee lorsque la 
question s'est affichee. Si le joueur a choisi la bonne reponse, nous creditons numcorrect d'une unite. 
U n nouveau message texte est affiche dans les deux cas : 

// Le joueur selectionne une reponse 

public function clickAnswer(event:MouseEvent) { 

// Recuperer le texte de la reponse selectionnee et comparer 
var selectedAnswer = event. currentTarget. getChildAt(0) .text; 
if (selectedAnswer == correctAnswer) { 
nunCorrect++; 

messageField = createText( "You got it! " ,questionFornat,gameSprite, 0,140, 550) ; 
} else { 

messageField = createText(" Incorrect! The correct answer was:", questionFormat, 
ganeSprite,0, 140,550) ; 

} 

finishQuestion() ; 

} 
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Toutes les reponses sont ensuite examinees. La fonction finishQuestion parcourt en boucle chaque 
sprite. La reponse correcte est deplacee a une position y qui la situe au milieu. Tous les ecouteurs 
evenementi els sont supprimes egalement. Les autres reponses sont rendues invisibles. La Figure 10.4 
montrel'ecran acestade. 



Figure 10.4 

La bonne reponse est deplacee 
au milieu etaccompagneed'un 
message. 



I TriviaGame.swf 



Fichier Affichage Controle Oeboguer 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



You got it! 



© 



C ) Pete Best 



( Continue") 



Number of Questions: 1 Number Correct: 1 



public function finishQuestion ( ) { 

// Supprimer toutes les reponses sauf la bonne 
for(var i:int=0;i<4;i++) { 

answerSprites . getChildAt ( i) . removeEventListener (MouseEvent . CLICK, clickAnswer) ; 
if (answers[i] != correctAnswer) { 

answerSprites. getChildAt(i) .visible = false; 
} else { 

answerSprites. getChildAt(i) .y = 200; 

} 

} 

} 

Le score doit aussi etre mis a jour, ainsi que le pointeur questionNum. Pour finir, un nouveau bouton 
estcreeavec I' etiquette "Continue" (voir Figure 10.4 egalement) : 

// Question suivante 
questionNum++; 
numQuestionsAsked++; 
showScore() ; 

showGaneButton( "Continue" ) ; 
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Le bouton cree par ciickAnswer est un lien vers la question suivante. L orsque lejoueur clique dessus, 
nous appelons pressGameButton, qui lance la nouvel I e question ou passe a I'ecran gameover. 



Fin de la partie 

L'image gameover conti ent un bouton Play Again (rejouer) qui reconduit le joueur au debut d'une 
nouvelle partie. Avant cela, el le doit cependant appeler cleanup pour supprimer tous les restes de la 
partie term i nee : 

// Suppression des sprites 
public function cleanUpO { 

removeChild(gameSprite) ; 

gameSprite = null; 

questionSprite = null; 

answerSprites = null; 

dataXML = null; 

} 

Le jeu peut maintenant etre redemarre. 

Ce jeu de quiz simple suffit pour les sites Web ou les produits simples qui ne requierent qu'une 
solution tres rudimentaire. Pour un jeu de questions/reponses tres sophistique, nous devons ajouter 
bien d'autres fonctionnalites. 



Quiz version Deluxe 



Codes sources 

http://flashgameu.com 

A3GPU10 TriviaGameDeluxe.zip 



Pour ameliorer notre version du jeu actuel I e, nous allons ajouter un certain nombrede fonctionnalites 
qui la rendront plus excitante, plus stimulanteet plus amusante. 

Pour commencer, lejoueur doit avoir un temps I i mite pour repondre aux questions. La plupart des 
jeux de quiz sur ordinateur ou a la television imposent cettecontrainte. 

Ensuite, nousajouteronsun bouton d'indice afin quelejoueurpuisseobtenirs'il lesouhaiteune petite 
aide supplemental re. II existe deux types d'indices et nous les ajouterons tous les deux. 

Ensuite, nous rendrons le jeu plus informatif en placant des informations supplemental res apres 
chaque question, cequi contribuera a rendre lejeu plus ludique. Les informations viendront completer 
ce que lejoueur vient d'apprendre en repondant a la question. 
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Pour finir, nous al Ions relooker le systeme de score. Celui-ci doit tenir compte du temps pris pour 
repondrea la question etdu faitquelejoueura reclame ou non un indice. 

Enfin, en guise de bonus supplemental re, nous ameneronsle quiz a lire un grand nombre de questions mais 
a en selectionner dix au hasard a utiliser. Le questionnaire sera ainsi different a chaque nouvelle partie. 

Definir un temps limite 

Pour aj outer une contrainte de temps au jeu, nous avons besoin d'une representation visuelle du temps 
que lejoueur a pour repondrea une question. Nouspouvonsproceder en utilisant un objetclip separe. 
Cet objet clock peutcorrespondre a n'importe quel type d'outi I representant le temps : unehorloge, 
du texte ou quoi que ce soit d'autre. 

Pour cet exemple, j'ai configure un clip de vingt-six images. Toutes les images contiennent vingt-cinq 
cercles. A parti r de I 'image 2, I'un des cercles est rempli avec une forme unie. Dans la premiere 
image, les vingt-cinq cercles sont done vides. A la vingt-sixieme, ils sonttous remplis. La Figure 10.5 
presente ceclip clock. 



Figure 10.5 

La quinzieme image 
du clip Clock contient 
quatorze cercles remplis. 
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Nous utiliserons un Timer pour compter lessecondes. Ajoutonsdonc une instruction import a ceteffet : 

import flash. utils. Timer; 

Ensuite, nous ajoutons un clock aux sprites utilises : 

private var clock:Clock; 

Et un Timer : 

private var questionTimer:Timer; 

Dans la fonction askQuestion, nous devons ajouter le Clock et lancer le Timer : 
// Configurer une nouvelle horloge 
clock = new Clock ( ) ; 
clock. x = 27; 
clock. y = 137.5; 
questionSprite.addChild (clock) ; 
questionTiner = new Timer(1000,25) ; 

questionTimer. addEvent Listener (Time rEvent .TIMER, updateClock) ; 
questionTiner. start ( ) ; 

L'objet clock sera positionne juste en dessous de la question a I'ecran. En fait, nous devons etendre 
un peu la hauteur du jeu et deplacer les elements vers le bas pour faire place a notre objet clock et a 
certains autres elements que nous al Ions ajouter sous peu. La Figure 10.6 presente cette nouvelle 
disposition. 



Figure 10.6 

L'objet Clock a ete ajouteet il reste 
de la place pour d'autres elements. 
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TriviaCameDeluxe.swf 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



ooooooooooooooooooooooooo 



(a) Pete Best 

George Harrison 
(^) Ringo Starr 
(d) Stu Sutcliffe 



Number of Questions: 0 Number Correct: 0 
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L'utilisation de vingt-cinq points pour I'horloge est completement arbitraire. Vous pourriez 
creer n'importe quelle sequence en vingt-six images sous forme de clip et I'utiliser (un chro- 
nometre ou une barre de progression, par exemple). II n'est meme pas necessaire d'utiliser 
vingt-cinq elements separes. Vous pourriez aisement remplacer le tout par cinq modifications 
et etendre les images le long du scenario. 



La fonction updateciock est appelee a chaque seconde. Le clip clock avance d'une image de plus. 
Lorsqueletempsestecoule, un messageestafficheetunequestionfinale(finishQuestion) est appelee 
exactement comme lorsque le joueur clique sur une reponse : 

// Mettre a jour I'horloge 

public function updateClock(event:TimerEvent) { 
clock. gotoAndStop( event .target .currentCount+1 ) ; 
if (event. target. currentCount == event. target. repeatCount) { 

messageField = createText( "Out of time! The correct answer was:", 
questionFormat,ganeSprite,0, 190,550) ; 
finishQuestion( ) ; 

} 

} 

A present, le joueur a deux moyens d'obtenir une mauvaise reponse : en choisissant une proposition 
incorrecte ou en depassant le del ai autorise. 

Ajouter des indices 

Vous aurez peut-etre remarque que les fichiers XML d'exemple incluent a la fois un indice (hint) et 
une info supplemental re (extra fact) pour toutes les questions. Nous al Ions enfin nous en servir. 

Pour ajouter des indices simples au jeu, nous inclurons un simple bouton "Hint" (indice) a cote de 
chaque question. Lorsque le joueur cliquera dessus, nous le remplacerons par le texte de I' indice. 

II nous faut quelques nouveaux elements pour implementer ce mecanisme. Tout d'abord, nous allons 
ajouter un hintFormat aux definitions de la classe, avec les definitions de variable texte : 

private var hintFormat :TextFormat; 

Ensuite, nous definirons ce format dans la fonction de construction : 

hintFormat = new TextFormatf "Arial" ,14, 0x330000, true, false, false, null, null, "center") ; 

Nous ajouteronsegalement un hintButton a la liste des variables de la classe, avec les definitions de 
sprites etd'objets: 

private var hintButton:GameButton; 
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Dans la fonction askQuestion, nous creerons le nouveau bouton H int et le positionnerons en dessous 
de la derniere reponse, comme le montre la Figure 10.7 : 

// Placer le bouton d'indice 
hintButton = new GameButton() ; 
hintButton. label. text = "Hint"; 
hintButton. x = 220; 
hintButton. y = 390; 
gameSprite . addChild ( hintButton ) ; 

hintButton. addEventListener(MouseEvent .CLICK, pressedHintButton) ; 



Figure 10.7 

Le bouton Hintapparait 
vers le bas. 



TriviaGameDeluxe.swf 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



ooooooooooooooooooooooooo 



(a) Ringo Starr 

(b) StuSutcliffe 

(c) George Harrison 
Dj Pete Best 



( Hint ") 



Number of Questions: 0 Number Correct: 0 



Lorsque lejoueur clique surle bouton, celui-ci disparait. II est remplace par un nouveau champ texte 
auquel est attribue le format de texte nintFormat : 

// Le joueur veut un indice 

public function pressedHintButton(event:MouseEvent) { 
// Supprimer le bouton 
gameSprite. renoveChild( hintButton) ; 
hintButton = null; 

// Afficher 1' indice 

var hint:String = dataXML.item[questionNun] .hint; 

var hintField:TextField = createText(hint, nintFormat, questionSprite, 0,390, 550) ; 
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Nous souhaitons aussi utiliser I'instruction removeChiid a I'interieur de la fonction finishQuestion, 
en verifiant d'abord que le hintButton existe, au cas ou il aurait ete supprime lorsque le joueur a 
clique dessus : 

//Supprimer bouton d'indice 
if (hintButton != null) { 

gameSprite. renoveChild(hintButton) ; 

} 

Cette verification empeche que I'utilisateur clique surle bouton apresquela reponse a la question eut 
dejaetedonnee. 

Voila tout cequ'il nousfaut pour afficher I'indice. Comme hintFieid fait parti ede quest ionsprite, 
il est nettoye lorsque nous supprimonsce sprite a la fin dela parti e. La Figure 10.8 montre I'indice qui 
apparait apres que le joueur a clique sur le bouton. 



Figure 10.8 

L'indice apparait a 
la place du bouton 



TriviaCameDeluxe.swf 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



ooooooooooooooooooooooooo 



(a) Ringo Starr 

(B) Stu Sutcliffe 

C George Harrison 

(S) Pete Best 

Was fired before the Beatles hit it big. 



Number of Questions: 0 Number Correct: 0 



Qu'est-cequ'un bun indice ? II peut parfois etre plus difficile de rediger un bon indiceque la 
question et les reponses. II ne faut pas donner la reponse directement et, pourtant, il faut 
aider le joueur malgre tout. Souvent, le meilleur moyen consiste a donner un indice qui sug- 
gere la reponse mais dans un autre contexte. Par exemple, si la question concerne des noms 
de presidents et que la reponse est Charles de Gaulle, I' indice pour rait etre "II a donne son 
nom a un aeroport" . 
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Ajouter des informations supplementaires 

II est assezfaci I ed'ajouter des informations supplemental res a la fin d' unequesti on. Cettefonctionnalite 
est sembablea celle des indices, a ceci pres que les informations s'affichent automatiquement lorsque 
lejoueur a repondu a la question. 

Aucune nouvelle variable n'est requise pour cela. II nous suffit de creer un champ texte et de le 
remplir lorsque la question est terminee. Le code suivant est ajoute a finisnQuestion : 

// Afficher les informations supplementaires 

var fact:String = dataXML.item[questionNum] .fact; 

var factField:TextField = createText(fact, hintFormat,questionSprite, 0,340, 550) ; 

Comme le nouveau TextFieid fait partie de questionsprite, il est supprime en meme temps. 
Nous utilisons egalement le format nintFormat au lieu de creer un format separe pour ces infor- 
mations. La Figure 10.9 presente le resultat. 



Figure 10.9 

Les informations 
supplementaires 
s'affichent lorsque 
I'utilisateur a repondu 
a la question. 
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TriviaG am e De I u xe . swf 



The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 

ooooooooooooooooooooooooo 



You got itl 



® 



Pete Best 



(continue ) 

Pete stayed until shortly after their first audition for EMI In 1962, but was fired 
on August 16th of that year, to be replaced by Ringo Starr. 



Number of Questions: 1 Number Correct: 1 



A u moment de decider ou placer les informations supplementaires, je me suis assure que I'indice et les 
informations pouvaient cohabiter a I'ecran. Si lejoueur choi sit d'afficher I'indice, il restea I'ecran apres 
que lejoueur a repondu a la question etapparait juste en dessous des informations supplementaires. 
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Ajouter un systeme de score complexe 

Le problemeavec la fonctionnal ite des indices ainsi qu'avec I'horloge tient a ce que lejoueur est tres 
peu penalise par le fait de profiter de I'indice ou de laisser s'ecouler un long delai avant de repondre. 

Ce qui rend lejeu plus excitant, c'est d'avoir une penal ite en cas d'usage de I'indice. En outre, nous 
pouvonscomptabiliser lenombrede points marques en fonction de la rapidite avec laquelle lejoueur 
repond a la question. 

Pour operer ces modifications, introduisons deux nouvelles variables. E I les peuvent etre placees 
n'importeou dans les definitions de variables, memes'il est preferable deles placer avec les definitions 
de variables de I'etat du jeu existantes. E lies tiendront le registre du nombre de points que vaut la 
question actuelleet du nombre de points total que lejoueur a marques jusque-la dans la partie : 

private var questionPoints:int; 
private var gameScore:int; 

Dans la fonction startTriviaGame, nous initial iserons gameScore a 0, juste avant d'appeler showscore : 
gameScore = 0; 

La fonction showscore sera remplacee par une nouvelle version. Celle-ci affichera le nombre de 
points que vaut la question et I e score actuel du joueur : 

public function showScore() { 
if (questionPoints != 0) { 

scoreField .text = "Potential Points: "+questionPoints+" \t Score: "+gameScore; 
} else { 

scoreField .text = "Potential Points: ---\t Score: "+ganeScore; 

} 

} 



Les caracteres \t dans la valeur de scoreField. text representent un caractere de tabulation. 
En plagant une tabulation entre les deux parties du champ, nous donnons la possibilite au 
texte de rester dans le meme espace general, meme lorsque la longueur des nombres change. 
Cen'est pasunesolution parfaite, ma is el I e est bi en plussimpleque cellequi conslstea creer 
deux champs separes dans ce cas. Vous pourrlez utiliser deux champs separes si vous sou- 
haitez mieux control er le placement de ces nombres. 



La Figure 10.10 montre comment le nouveau score est affiche en bas de I'ecran. 

M aintenant que la fonction showscore doit mettre a jour les points potentiels et le score total, nous 
devons I'appeler plus souvent. A chaque fois que le questionscore change, nous devons appeler 
showscore pour faire connaitre au joueur la nouvelle valeur. 

Si questionscore vaut 0, nous affichons - - - au lieu deo. Nous indiquerons ainsi plus clairement que 
les points potentiels ne signifient rien entre les questions. 
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Figure 10.10 

Le nombre de questions pose 
et le nombre de bonnes reponses 
ont ete remplaces par le nombre 
de points potentiel pour la question 
etle score actuel du ioueur. 
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The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 

ooooooooooooooooooooooooo 



(a) George Harrison 

(b) Pete Best 
Ringo Starr 

(B) StuSutcliffe 



( Hint ") 



Potential Points: 825 



Score: 0 



Dans askQuestion, nous fixerons le score potentiel de la question a 1 000 : 
// Commencer la question avec les points au maximum 
questionPoints = 1000; 
showScore( ) ; 
) 

A chaque seconde qui passe, nous diminuons ensuite le score. Cette procedure intervient dans la 
fonction updateciock, A chaque fois qu'un nouveau cercle est rempli, nous supprimons 25 points 
pour le score potentiel : 

// Reduction des points 
questionPoints -= 25; 
showScore() ; 

Les points potentiels diminuent aussi lorsque le joueur demande a afficher I'indice. Cette operation 
lui coute300 points : 

// Penalite 

questionPoints -= 300; 
showScore() ; 

Bien evidemment, leseul moyen d'obtenirdes points consiste a donner la bonne response. L' instruct] on 
suivante est done ajouteea Tempi acement adequat dans ciickAnswer : 

gameScore += questionPoints; 
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Inutile ici d'appeler showscore car la fonction sera appelee immediatement apres dans la fonction 
finishQuestion. C'est d'ailleurs a cet endroit que nous allons positionner questionPoints a 0 
egalement : 

questionPoints = 0; 
showScore() ; 

Vous pouvez aussi choisir de conserver le champ texte d'oirigine du score en bas et afficher les points 
potentiels et le score dans un champ separe. Les joueurs pourront alors voir toutes les statistiques 
concernant leur resultat. 

Les animations TriviaGameDeluxe.fla et TriviaGameDeluxe.as conservent numCorrect et 
numQuestionsAsked a cet effet, bien qu'elles ne les utilisent pas. 

Rendre les questions aleatoires 

Vous pourrez souhaiter ou non que votrejeu dequiz presente les memes questions a chaquenouvelle 
parti e. Tout depend de votre maniere d'utiliser cejeu. 

Si vous souhaitez presenter des questions differentes a chaquefois et que votrejeu est mis a disposition 
sur un site Web, I ' i deal est d'avoir une application serveur qui cree un document XML aleatoire de 
questions et reponses a parti r d'une grande base de donnees. 

Si vos besoins sont plus simples mais que vous souhaitiez neanmoins qu'un certain nombre de 
questions aleatoires soient choisies parmi un nombre total plutot restreint de questions, il existe un 
moyen deproceder en ActionScript. 

U ne fois le document XML lu, ces donnees brutes peuvent etre trai tees pour aboutir a un document 
XML plus petit ne contenant qu'un nombre defini de questions aleatoires. 

Le nouveau debut de la fonction xmiLoaded ressemble alors a ceci : 

public function xmlLoaded(event:Event) { 

var tempXML:XML = XML(event. target. data) ; 
dataXML = selectQuestions (tempXML, 10) ; 

La fonction selectQuestions prend en parametres le jeu de donnees complet et un nombre de 
questions a retourner. E I le selectionne des nceuds item aleatoires du document X M L d'origine et cree 
un nouvel objetXM L : 

// Selectionner un nombre donne de questions aleatoires 

public function selectQuestions(allXML:XML, numToChoose:int) :XML { 

// Creer un nouvel objet XML pour contenir les questions 
var chosenXML:XML = <trivia></trivia>; 
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// Boucler jusqu'a ce que nous ayons assez de questions 
while (chosenXML. child ("*") .length () < numToChoose) { 

// Selectionner une question au hasard et la deplacer 

var r:int = Math.floor(Math. random( )*allXML. child ( "*" ) .length( ) ) ; 

chosenXML. appendChild(allXML.item[r] .copy() ) ; 

// Ne pas utiliser a nouveau 
delete allXML.item[r] ; 

} 

// Retour 
return chosenXML; 

} 

Cette selection aleatoi re etce melange des questions sonttres pratiques pour creer une solution rapide. 
Si vous avez par exemple plus de cent questions, il est en revanche important de ne pas demander a 
I 'animation de lire un document X M L aussi grand en entier a chaquefois. J e recommande la solution 
cote serveur. Si vous n'avez pas I'habitude de programmer des solutions cote serveur, associez-vous 
avec quelqu'un d'aguerri dans cetexercice. 



Quiz d'images 



Codes sources 
)t><- http://flashgameu.com 

A 3G P U 10_ P ictu reT r i viaG amezi p 



Tous les jeux de questions et de reponses ne fonctionnent pas necessairement avec du texte. II arrive 
qu'une image soit mieux a meme de representer une idee. Par exemple, si vous souhaitez tester les 
connaissances d' une personne en geometrie, les questions et reponses sous forme de texte ne sont pas 
toujours les mieux adaptees pour operer des evaluations. 

II n'est en fait pas si difficile de convertir notre moteur de jeu de quiz en une nouvelle version qui 
utilise des images. II suffit de reorganiser legerement I'ecran puis de permettre le chargement de 
fichiers d'image externes. L'essentiel du jeu peut etre conserve en I'etat. 
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Ameliorer la disposition des reponses 

Avant de pouvoir charger des images, nous devons ameliorer la disposition des reponses a I'ecran. 
La Figure 10.11 presente les reponses selon un quadri Mage de 2 x2 au lieu dequatre lignes. 

Nous disposons ainsi d'un meilleur cadre pour des images d'environ 250 pixels de large et 100 de 
haut au maximum. II sera preferable des' en tenir a 200 x 80 afin que les images chargees neviennent 
pas gener les autres boutons. 



Figure 10.11 

Les reponses sont maintenant 
empilees dans deux colonnes 
etdeux lignes. 
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The Trivia Quiz 



Who is known as the original drummer of the 
Beatles? 



(A) Ri 



Ringo Starr 



® 



George Harrison 



(C) Pete Best (d) 



Stu Sutcliffe 



Number of Questions: 0 Number Correct: 0 



Cette disposition peut etre obtenue en n'operant qu'un changement au milieu de la fonction 
askQuestion. Les variables xpos et ypos tiennent le registrede la position couranteet commencent a 
0 etO. Ensuite, 1 est ajoutea xpos afin de passer vers la droite. Ensuite, xpos est rameneea e et ypos, 
augmentee. Cette procedure place les quatre reponses aux positions (0,0), (1,0), (0,1) et (1,1), ce qui 
correspond aux emplacements (100,150), (350,150), (100,250) et (350,250) a I'ecran. 



Nous allons apporter d'autres modifications a cette section de code sous peu. Le code qui suit ne 
correspondra done pas au f\ch\er PictureTriviaGame.assi vousavancez parallelementau livre. 



// Placer chaque reponse dans un nouveau sprite avec une icone de cercle 
answerSprites = new Sprite(); 
var xpos:int = 0; 
var ypos:int = 0; 

for(var i:int=0;i<answers.length;i++) { 
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var answer:String = answers[i]; 

var answerSprite: Sprite = new Sprite(); 

var letter:String = String. f romCharCode(65+i) ; // A-D 

var answerField:TextField = createText(answer, answerFormat, answerSprite, 0,0, 200) ; 

var circle:Circle = new Circle(); // De la bibliotheque 

circle. letter. text = letter; 

answerSprite. x = 100+xpos*250; 

answerSprite. y = 150+ypos*100; 

xpos++ 

if (xpos > 1 ) { 
xpos = 0; 
ypos += 1 ; 

} 

answerSprite. addChild(circle) ; 

answerSprite. addEventListener(MouseEvent. CLICK, clickAnswer) ; // En faire un bouton 
answerSprites . addChild ( answerSprite) ; 

} 

Cette modification est deja utile parce qu'elle presente les reponses d'une maniere plus interessante 
qu'en les empilant les unes au-dessus des autres. 

Reconnaitre deux types de reponses 

Le but ici est non pas de creer un quiz qui ne propose que des images comme reponse, mais de vous 
permettre de combiner du texte et des images. Nous devons done pouvoir specifier dans le fichier 
XML le type de la reponse. Cela peut etre fait en ajoutantun attri but a I a reponse dans le code XML : 

<item> 

<question type="text">Which one is an equilateral triangle?</question> 
<answers> 

<answer type="file">equilateral. swf </answer> 
<answer type= "file ">right .swf </answer> 
<answer type="file">isosceles.swf </answer> 
<answer type="file">scalene. swf </answer> 
</answers> 
</item> 

Pour determiner si une reponse doit etre affichee sous forme de texte ou de fichier externe charge, nous 
examinons simplement la propriete type. Nous al Ions maintenant modifier notrecode pour cela. 
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Creer des objets Loader 

Dans shuffieAnswers, nous creons un tableau de reponses trie aleatoirement a parti r des responses dans 
I'objet XML. Le texte de ces reponses est stocke dans un tableau. N ous devons cependant maintenant 
stacker a la fois le texte et le type de ces reponses. L a ligne ou nous ajoutons une nouvelle reponse au 
tableau prend ainsi la forme suivante : 

shuffledAnswers. push ({type: answers. answer[r] .@type, value: answers. answer[r]}) ; 

A present, lorsque nous creons chaque reponse, nous devons determiner si la reponse correspond a du 
texte ou a une image. S'il s'agit d'une image, nous creons un objet Loader. Celui-ci agit comme un 
clip recupere de la bibl iotheque, sauf que Ton utilise un uRLRequest et la commande load pour 
recuperer lecontenu du clip a partir d'un fichier externe : 

var answerSprite: Sprite = new Sprite(); 

if (answers[i] .type == "text") { 

var answerField:TextField = createText(answers[i] .value, answerFormat, answerSprite, 
0,0,200); 

} else { 

var answerLoader: Loader = new Loader(); 

var answerRequest: URLRequest = new URLRequest( "triviaimages/ "+answers[i] .value) ; 
answerLoader. load (answerRequest) ; 
answerSprite. addChild( answerLoader) ; 

} 

Le code presuppose que toutes les images se trouvent a I'interieur d'un dossier nomme triviaimages. 

Les objets Loader peuventagirdemaniereautonome. U nefoisquevouslesactivez avec la commande 
load, ils obtiennent le fichier depuis le serveur et apparaissent a leur position designee lorsqu'ils sont 
prets. Vous n'avez pas besoin de les surveiller ni de faire quoi que ce soit lorsque le chargement est 
termine. 



un peu de travail supplemental. Ne serait-il pas injuste que le chronometre se mette en 
marche alors que certaines des reponses ne sont pas encore apparues? II convient done 
d' ecouter Event, complete pour chaque Loader et de ne lancer le chronometre qu'une fois que 
toutes les reponses ont ete affichees. 



La Figure 10.12 presente lequiz avec quatre animations externes chargees dans les reponses. 
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Figure 10.12 

Des animations externes ont 
remplace le texte dans chaque 
reponse. 
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Determiner la bonne reponse 

N ous nous sommes auparavant appuyes sur la propriete text du champ de la reponse pour determiner 
si le joueur avait choisi la bonne reponse. N ous ne pouvons plus le faire a present car le clip de I'objet 
Loader ne possede pas de propriete text comme les objets TextFieid. Au lieu de eel a, nous allons 
done tirer parti du fait que le second objet dans answersprite correspond a I'objet circle cree de 
maniere dynamique. Nous pouvons lui attacher une propriete answer et y stacker la reponse : 

circle. answer = answers[i] .value; 

Ensuite, dans la fonction ciickAnswer, nous examinerons cette nouvelle propriete answer afin de 
determiner si le joueur a clique sur le bon sprite : 

var selectedAnswer = event. currentTarget. getChildAt (1 ) .answer; 

Vous remarquerez que I'objet circle est I 'enfant numero 1 dans answersprite. Auparavant, nous 
examinions I'enfant numero 0, qui etait I'objet TextFieid. 

Une autre modification estrequise afin de definir correctement la position dela bonne reponse lorsque 
le joueur a opere son choix. A uparavant, les reponses se trouvaient toutes dans une unique colonne, 
avec la meme valeur x. Lorsque noussouhaitionscentrer la bonne reponse, nous n'avionsdonc qu'a 
definir la valeury du bon answersprite. M aintenantquela reponse peutsetrouver a gauche ou a droite, 
nous devons aussi positionner la valeur x. Voici le nouveau code pour la fonction finishQuestion : 



answerSprites.getChildAt(i) .x 
answerSprites.getChildAt(i) .y 



200; 
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Etendre la zone reactive 

Un dernier point avant que nous n'en ayonsfini avec les responses. Si la reponse est une reponse texte, 
les joueurs peuvent cliquer sur le cercle ou le champ texte pour enregistrer leur reponse. Avec les 
animations chargees, il peut ne pas y avoir grand-chose a cliquer. A la Figure 10.11, les responses ne 
sont rien d'autre que des lignes fines qui composent un triangle. 

Pour cliquer sur la reponse, le joueur doit alors cliquer sur le cercle ou sur une partie du graphisme. 1 1 
faudrait pourtant qu'il puisse cliquer sur n'importe quelle partie normale de la reponse. 

L'un des moyens rapides de resoudre ce probleme consiste a placer un rectangle plein a I ' interieur de 
chaque sprite de reponse. II suffit pour eel a de tracer un rectangle plein en fixanta 0 le canal alpha afin 
de le rendre invisible : 

// set a larger click area 

answerSprite. graphics. beginFill(0xFFFFFF,0) ; 

answerSprite. graphics. drawRect( -50, 0, 200, 80); 

La Figure 10.13 presente les sprites de reponse avec un graphisme sous-jacent. Au lieu de rendre la 
valeur nulle, j'ai fixe la valeur alpha a 0,5 afin que le rectangle se remarque. 



Figure 10.13 

Un rectangle a etedessine 
derriere chaque reponse. 
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Le joueur peut maintenant cliquer dans la zone complete de chaque reponse. 
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Images pour les questions 

En plus d'utiliser des images dans les reponses, vous pourriez souhaiter utiliser des images pour 
la question elle-meme. Nous procederons de la meme maniere, en utilisant un attribut type du 
codeXML : 

<item> 

<question type="file">italy . swf</question> 
<answers> 

<answer type="text">Italy</answer> 

<answer type="text">France</answer> 

<answer type="text">Greece</answer> 

<answer type="text">Fenwick</answer> 
</answers> 
</item> 

Cet ajout a notre codeA ctionScript est plus simple car la question n'estpascettefoisun elementactif. 
Nous avons simplement besoin d'utiliser un objet Loader au lieu d'un objet TextFieid. Voici le 
changement apporte a askQuestion : 

// Creer un champ texte pour la question 

var question:String = dataXML.item[questionNum] .question; 

if (dataXML.item[questionNum] .question. @type == "text") { 

questionField = createText(question,questionFormat,questionSprite, 0,60, 550) ; 
} else { 

var questionLoader:Loader = new Loader(); 

var questionRequest:URLRequest = new URLRequest ( "triviaimages/ "+question) ; 

quest ionLoader . load (questionRequest ) ; 

questionLoader.y = 50; 

questionSprite . addChild (questionLoader) ; 

} 

La Figure 10.14 presente une question qui utilise une image externe comme question et quatre 
reponses texte. Vous pourriez evidemment utiliser des images externes aussi bien pour la question que 
pour les quatre reponses. 

La Figure 10.14 montre comment le fait d'utiliser des fichiers externes pour les questions et les 
reponses n'impli que pas necessairementqu'i I s'agissededessinsou d'images. II peut aussi y avoirdu 
texte. Ce melange peut se reveler pratique pour un texte de mathematiques qui doit utiliser des 
notations complexes comme des fractions, des puissances ou divers symboles. 
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Figure 10.14 

La question est une animation 
Flash externe, mais les quatre 
reponses sont du texte. 



PictureTriviaGame.swf 



Fichier Affichage Controle Deboguer 



The Trivia Quiz 



Which country is this? 



® 
© 



Greece 



Fenwick 



B) Italy 



® 



France 



Number of Questions: 2 Number Correct: 0 



Modifier le jeu 

La qualite des jeux de quiz depend de eel le des questions et des reponses qu'ils contiennent, quelle 
que soit par ailleurs la qualite du programme et de I 'interface. Si vous prevoyez de creer un jeu a des 
fi ns de divertissement, i I vous f aut des questions et des reponses suffisamment attrayantes pour susci ter 
I'interet des joueurs. Si vous creez un jeu a des fins educatives, vous devez vous assurer que les 
questions et les reponses soient claires et correctement formulees. 

II estassez aisede modifier ce jeu demanierea inclureun plusgrand nombreou un plus petit nombre 
de reponses. Si vous le souhaitez, vous pouvez ne proposer que deux reponses, comme V rai et Faux. 
Les questionnaires a choix multiples proposentcependant rarement plus de quatre reponses, bien que 
I 'on voie parfois des propositions du type "Toutes" ou "Aucune" pour valider ou invalider toutes les 
reponses precedentes. A ucune programmation parti culi ere n'est requise pour creer une solution de ce 
type, sauf eventuellement pours' assurerqueces reponses globales soient bien proposees en cinquieme 
ou sixieme choix dans la liste. 

A u-dela des questions et des reponses etde la manieredontelles sont affichees, I' une des modifications 
possibles pourrait etre de proposer une metaphore du jeu. 1 1 s'agirait d'une representation visuelle du 
score dujoueur qui pourrait aussi modifier la manieredejouer le jeu. 

Par exemple, lejoueur pourrait avoir un personnagequi grime a unecorde. A chaque bonne response, 
le personnage grimperait d'un cran.A chaque mauvaise reponse, il retomberait en bas. Lebutserait 
deparveniren haut en repondant correctement a un certain nombre de questions de suite. 

Les metaphores de jeu peuvent etre utilisees pour mieux harmoniser le jeu avec le site Web ou le 
produitdont il fait parti e. Par exemple, un site de preservation dela nature pourrait proposer un jeu de 
questions/reponses qui utilise des animaux. 
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jeux de plate-forme 



Au sommaire de ce chapitre : 

• Concevoir lejeu 

• Creer la classe 
i M odifier lejeu 
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Codes sources 

)t>c http://flashgameu.com 

A3GPU 11 PlatformGame.zip 



Les jeux a defilement lateral ou jeux de plate-forme sont apparus pour la premiere fois au debut des 
annees 1980 et sont rapidement devenus un standard des jeux video jusqu'a ce que la 3D ne s'impose 
dans le courant des annees 1990. 

Les jeux de plate-forme a defilement permettent au joueur de controler un personnage qui apparait de 
profil. II peut se deplacer vers la gauche et vers la droite ainsi que sauter le plus souvent. Lorsqu'il 
avance vers un cotede I'ecran, I'arriere-plan defile afin de reveler d'autres portions du jeu. 



Les jeux de plate-forme incluent presque toujours un personnage capable de sauter. Le plus 
celebre d'entre eux est evl detriment M ario, de Nintendo. II a ppa raft dans des dizainesde jeux, 
de Donkey Kong jusqu'a de nombreux jeux d'aventure des consoles Nintendo. 




Danscechapitre, nous allons creer un jeu deplate-formeavec un personnage principal qui sedeplace 
vers la gauche et vers la droite et peut sauter. Nous inclurons des murs et des plates-formes. II y aura 
aussi des ennemis et des objets a ramasser. 



Conception du jeu 

Avant de commencer a programmer notre code, commencons pas considerer tous les aspects du jeu. 
II nousfaut un heros, des ennemis, des objets et un moyen de creer des niveaux. 



Conception des niveaux 

L'un des aspects importants des jeux de plate-forme concerne la conception des niveaux. Tout comme 
lejeu dequiz du precedent chapitre ne peut exister sans contenu, lejeu de plate-forme requiert aussi 
un contenu. II s'agit en I'occurrence d'une serie de niveaux. 

Quelqu'un (le programmeur, un graphiste ou un concepteur de niveau) doit creer les niveaux. La 
Figure 11.1 presente un niveau qui sera en fait le premier de notrejeu. 

Les jeux de plate-forme plus sophistiques peuvent aussi integrer un editeur de niveau qui permet au 
concepteur de niveau de creer de nombreux niveaux et de les tester pendant que les programmeurs et 
les graphistes travai Merit sur le reste du jeu. 

Pour notre exemple simple, nous concevronscependant les niveaux directement dans Flash, en utilisant 
un clip contenant les differentes pieces du jeu. 
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Figure 11.1 

Le niveau 1 de notre jeu 
de plate-forme inclut trois 
ennemis, plusieurs tresors, 
une cleet une porte. 
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L'animation PlatformG ame.fla contient differentes pieces de jeu danssa bibliotheque. En voici la liste : 

• Sol. Un bloc de 40 x40 simple sur lequel le heros peuttenir debout. II bloquera le heros cote 
gauche et cote droit. 

Mur. Identiqueau sol quanta I ' usage, mais visuellement different. 

s Heros. Lepersonnagedujoueur. Inclut des animations pour la position debout, la marche, lesaut 
et la mort. 

• Ennemi. U n personnage plus simple avec une animation de marche. 

• Tresor. U n bijou simple, avec des reflets animes. 

• Cle. Un graphismedecle simple. 

• Porte. U ne porte, avec une animation pour I'ouverture. 

Pour creer un niveau a partir de ces objets, il suffit de les positionner a I'interieur d'un clip. La 
Figure 11.1 en donneun exemple. II s'agiten fait du clip gameieven dans la bibliotheque del 'anima- 
tion PlatformG ame.fla. 



Pieces des murs et du sol 

Pour creer facilement ce niveau, j'ai mis en place une grille en choisissant Affichage > Grille > 
M odifier la grille et en definissant un quadri Mage de 40 x 40. Ensuite, j'ai fait glisser les pieces du sol 
et des murs de la bibliotheque afin de les placer le long de cette grille. 

La Figure 11.2 presente le niveau en masquant I'arriere-plan afin de reveler les reperes de la grille. $ 

Les pieces des murs et du sol different visuellement dans ce jeu, mais seront consideres comme le 
meme type d'objet dans le code. Vous pouvez ajouter d'autres "blocs constructeurs" de ce type pour 
mieux diversifier lejeu. 



Parmi les i dees qui ne sunt pas uti I i sees dans ce jeu, I'une consiste a utiliser de nombreuses 
variantes pour les blocs des murs et du sol, en les stockant toutes dans differentes images du 
clip.Au debut du jeu, une image aleatoire peut ainsi etre choisi e pour chaquebloc. 
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Figure 11.2 

Le niveau peut etre configure 
plus facilementen placant 
les pieces des murs et du sol 
le long de la grille. 
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Les murs et le sol n'ont pas besoin de se voir attribuer un nom particulier. Les elements de la 
bibliotheque sont neanmoins configures de maniere a etre exportes pour ActionScript, comme le 
montre la Figure 11.3. Ce reglage est en revanche vital parce que notre code recherchera des objets 
Floor etwaii. 



Figure 11.3 

Leclip Floor est configure 
pour etre aussi I'objetde 
classe Floor. 



Proprietes du symbole 



Nom : Floor 

Type : Clip 

1 . j Bouton 
1 Graphique 



Options de base 



Floor | 



Classe de base : flash. display, MovieClip 

Liaison : [7] Exporter pour ActionScript 

O Exporter pour le partage a I'execubon 
H Exporter dans la premiere image 

|~1 Importer pour le partage a (execution 



[ Parcourir... j FicNer :.:sklescroller.fia 
Nom du symbole :floor 



| Symbole.. . | 

Toujours mettre a jour avant la publication 

Q Activer les reperes d'echelle a 9 decoupes 



Le heros et les ennemis 

Le heros apparaitdans lecoin superieur gauche des Figures 11.1 et 11.2. II a etesoigneusement place 
de maniere a setenir pile surun bloc desol (Floor). 

Le clip du heros contient plusieurs sections animees differentes. Examinez la Figure 11.4. 
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Vous remarquerez que le point d'alignement du clip se trouve exactement au bas des pieds du 
personnage. N ous leferons correspondre au haut de I' element Floor, sur lequel repose le personnage. 
Horizontalement, le personnage sera centre. 

Au moment de placer le heros, il faudra que sa position y corresponde a la position y de I' element 
Floor situe directement sous lui. Le heros commencera done en position debout. Si vous le placez en 
hauteur au-dessus du bloc Floor, il commencera par tomber sur le sol. C'est une autre approche 
possible, d'ailleurs : le personnage pourraitainsi paraitre tomber au milieu dece decor. 

L'ennemi correspond a un clip similaire, avec une simple sequence de marcheet une position debout 
(voir Figure 11.5). Vous remarquerez que le point d'alignement de l'ennemi se trouve egalement au 
bas de son pied. 

Ces petits bonhommes sont concus pour que Ton saute sur eux. C'est ainsi que le heros pourra s'en 
debarrasser. lis sont done courts sur pattes et comme accroupis. Nous n'aurons pas besoin d'une 
sequence de mort, car nous I es suppri merons de I ' ecran des I ' i nstant ou i Is seront detruits et uti I iserons 
I' explosion de points (la classe PointBurst) du Chapitre 8 pour afficher un message a cet endroit. 

Les ennemis doivent aussi etre places directement sur un bloc Floor. Sinon ils tomberont sur le bloc 
Floor suivant : la encore, ce peut etre un effet souhaite si vous le preferez. 

Lesennemisrequierentaussi desnomsd'occurrence. LestroisennemispresentesdanslesFigures 11.1 
et 11.2 sont appeles enemyl, enemy2 et enemy3. 
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Figure 11.5 

L'ennemi n'a que 
deux sequences 
pour la position 
deboutetla marche. 



PlatformGame.lla" 





Autre point concernant les ennemis : ils seront programmes pour marcher vers I'avant et I'arriere, en 
se tournant des qu'ils rentrent dans un mur. Vous devez done les placer dans une zone ou figurent des 
murs des deux cotes. S'ils parviennent a uneextremite bordee par le vide, ils tomberont a la premiere 
occasion, lis continueront de tomber ainsi a chaque fois qu'ils en auront la possibil ite jusqu'a se 
stabiliser en avant et en arriere dans unezone bordee de murs des deux cotes. 



Joyaux et objets 

Differents objets apparaissent aux Figures 11.1 et 11.2. Les objets en forme de diamants sont des 
joyaux qui peuventetreramasses pour gagner des points. II n'y a rien departiculierementremarquable 
concernant le clip Treasure, si ce n'est qu'il contient plusieurs images pour animer un effet d'eclat 
lumineux. Cette animation n'affecteen rien lejeu ; elle n'a qu'un interet visuel. 



Si vous souhaitez plusieurs types de joyaux, le moyen le plus simple consiste a en placer un 
par image dans ce clip. Vous pouvez sinon creer une variete d'objets differents, comme des 
diamants, des pieces, des bagues, etc. Vous devrez alors les rechercher chacun dans le code. 



Les clips Key et Door sont similaires. Le clip Key contient des images pour I'animation uniquement. 
Le clip Door contient une sequence d'ouverture qui demarre a I'image 2 (voir Figure 11.6). 
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Figure 11.6 

Le clip Door contient 
une image 1 statique 
et une courte sequence 
animee de son ouverture. 




. Scene 1 S Door 



Les elements n'ont pas besoin d'etre parfaitement places dans la grille, lis doivent simplement etre a 
port.ee du heros lorsqu'il marcheou dans d'autres cas, lorsqu'il saute. Visuellement, il estcependant 
souvent plus naturel qu'ils reposent sur le sol. 



Faites attention a la superposition par caiques de vos elements de jeu. Elle sera conserved 
pendant I e deroulementdu jeu. Des lors, si le heros se trouve derriere un mur ou un autre objet, 
ce mur apparaftra devant le graphisme du heros lorsque ce dernier s'en rapproche. 
Vous pouvez cependant volontairement faire apparaltre des objets devant le joueur, comme 
une vitre semi-transparente ou un petit meuble. 




L es cl ips Treasure, Key et Door sont tous configures de maniere a etre export.es pour A ctionScript avec 
des noms de classe correspondant a leurs noms de bibliotheque. Notre code les recherchera d'apres la 
classe. Les occurrences des clips elles-memes ne doivent pas necessairement avoir de noms. 

Le coffre (chest) fait partie des autres elements du jeu. Ce clip a deux images presente un coffre de 
tresor ferme, puis ouvert. C'est I'objet de la quete du joueur. Le jeu se termine lorsque le joueur le 
trouve. 
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Graphismes d'arriere-plan 

Lesniveaux dujeu incluentegalementun clipavec des graphismes d'arriere-plan. Dans I ecas present, 
il s'agitd'un rectangle en degrade. II pourraity avoir plus; a vrai dire, tout ce que vous ajouterez a 
I'arriere-plan sera visible, sansetre actif. 

Vous pouvez done colorier la scene comme vous le souhaitez. De grands tableaux peuvent etre 
accroches au mur ou des torches animees, des messages et des signes. 

Aux Figures 11.1 et 11.2, des torches sont accrochees tout en haut. Elles se trouvent simplement 
placees sur le meme caique d'arriere-plan que le degrade. Le codede notrejeu n'a meme pas besoin 
deles prendre en compte car elles ne feront que defiler avec I'arriere-plan. 



La boTte de dialogue 

Cette animation inclura une boite de dialogue (voir Figure 11.7) que nous pourrons afficher a tout 
moment pour presenter des informations et attendre la reponse de I ' uti I i sateur. 




La boite de dialogue sera affichee lorsque le joueur meurt, lorsque la partie est terminee, lorsqu'un 
niveau est termine ou lorsque le joueur gagne. Lorsque I'un de ces evenements se produit, le jeu 
s'interrompt et une boite de dialogue s'affiche. Nousinclurons la boite de dialogue sous forme de clip 
separe avec un champ texte dynamique et un bouton. 
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Le scenario principal 

L e scenario pri nci pal i ncl ut une i mage start avec des i nstructions. A pres eel a, chaque i mage conti ent 
un clip de niveau de jeu. Ce systeme permet facilement de passer d'un niveau a un autre, aussi en 
cours de parti e que lorsque vous creez les niveaux. 

La seconde image contient GameLeveii, qui possede le nom d'instance gameievei. La troisieme 
image contient GameLevei2, qui possede egalement le nom d'instance gameievei. 

Lorsque le code ActionScript s' execute, il recherche le clip avec le nom d'instance gameievei dans 
I'image courante. Ce systeme permet de placer differents clips de niveaux de jeu dans differentes 
images. 

Dans les images de niveau de jeu se trouvent trois champs texte dynamiques : un pour le niveau, un 
pour le nombre de vies restantes et un pour le score. La Figure 11.8 montre a quoi ressemble I'ecran 
lorsque le jeu commence. 



Figure 11.8 

Trois champs texte apparaissent 
en bas de I'ecran. 
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Concevoir la classe 

La classe commence par examiner le clip gameievei. Elle parcourt en boucle chacun des enfants de 
ce clip et determine ce qu'il fait et comment il doit etre represente dans la classe du jeu. 

Par exemple, si un enfant est un objetwaii ou Floor, il est ajoutea un tableau des objets de ce type. 
Ensuite, lorsque les personnages se deplacent, ces objets sont testes pour detecter les collisions. 

Le heros et les ennemis sont aussi examines. Le codeconsidere que le heros possede le nom d'instance 

hero et les ennemis, les noms enemyl, enemy2, etc. 
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Pour determiner le type d'objet d'un clip, nous utiliserons I'operateur is. Cet operateur 
compare le type d'objet d'une variable a un type d'objet donne (par exemple (cettechose is 

MonObjet)). 



La plus grande partie du code, etdeloin, est celle qui gere I e mouvement. Le heros peutsedeplacer 
a gauche et a droite ou sauter. II est cependant aussi affects parlagraviteetpeuttomberd'un mur. II 
peutentrer en collision avec des mursetetrestoppeet entrer en collision avec lesol, cequi interrompt 
sa chute. 

Les ennemis en font de meme, hormis que leurs mouvements ne sont pas affectes par les touches 
flechees. lis suivent neanmoins les memes regies que le heros. 

A u lieu d'utiliser un codede mouvement different pour le heros et les ennemis, nous leurferons done 
partager la meme fonction de deplacement des personnages. 

Le defilement horizontal est un autre facteur de mouvement. Le heros et les ennemis se deplaceront a 
I'interi eur du clip gameievei. Si la position relative du heros sur la scenedepasseversla gauche ou la 
droite, nous deplacerons cependant I e clip gameievei tout entier pour le faire defiler. L e reste du code 
peut ignorer cela car rien ne se deplacera veritablement a I'interi eur de gameievei. 

Planification des fonctions requises 

Avant de commencer a programmer, voyons quel les fonctions nous al Ions utiliser dans la classe et 
lesquelles feront appel a d'autres : 

• startPiatformGame. Initialise le score et les vies du joueur. 

© startGameLevei. Initialise le niveau, en appelant les trois fonctions suivantes : 

- createHero. Cree I'objet hero, en examinant le placement de I'instance du clip hero. 

- addEnemies. Cree les objets enemy, en examinant les Clips enemyX. 

- examineLevei. Recherche les murs, le sol et les autres elements dans le clip gameievei. 
■ keyDownFunction. Consigne la touche enfoncee par I ' uti I i sateur. 

• keyupFunction. Consigne le moment ou I' uti I i sateur a fini d'appuyer sur une touche. 

• gameLoop. Appel ee a chaque image pour calculer le temps ecoule et appel er les quatre fonctions 
suivantes : 

- moveEnemies. Parcourt en boucle tous les ennemis et les deplace. 

- moveCharacter. Deplace le personnage. 

- scroiiwithHero. Fait defiler leclip gameievei en fonction de I' emplacement du heros. 

- checkCoiiisions.Verifiesi le heros entre en collision avec desennemisou desobjets. Appelle 
les trois fonctions suivantes : 
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- enemyDie. Lepersonnagedel'ennemi estsupprime. 

- heroDie. Leherosperd unevieetla partieesttermineelecasecheant. 

- getobject. Le heros recupere un objet. 

■ addScore.Ajoutedes points au score etl'affiche. 

• showLives. Affiche le nombre de vies restantes. 

• leveicompiete. Le niveau esttermine, pause etaffichagede la boitede dialogue. 
m gameCompiete. Le tresor est trouve, pause etaffichagede la boitede dialogue. 

• ciickDiaiogButton. L'utilisateur a clique sur le bouton de la boite de dialogue, passer a Taction 
suivante. 

• cleanup. Supprimer la liste du jeu (gameiist) afin de preparer le niveau suivant. 

M aintenant que nous connaissons les fonctions que nous devons ecrire, creons la classe Platform- 
Game.as 



Le fichier de paquetage n'est pas particulierement long, notamment si I'on considere tout ce que ce 
jeu realise. Nousconserveronsdonc tout le code dans une classe bien qu'il puisseetre plus utile pour 
un jeu de plus grande envergure d'avoir des classes separees pour les personnages, les objets et les 
elements du decor. 

Definition de classe 

Au debut de la classe figure notre liste habituelle d'instructions import, avec notamment la classe 
flash. utiis.getTimer, dont nous avons besoin pour les animations temporelles : 

package { 



Nousn'avons besoin que dequelquesconstantes. La premiere est gravity (la gravite), puis la distance 
jusqu'aux bords de I'ecran afin decommencer le defilement horizontal. 



Creer la classe 



import flash. display.*; 
import flash. events.*; 
import flash. text.*; 
import flash. utiis.getTimer; 




La constante gravity a ete determined suite a un processus de tentatives et d'erreurs. En 
sachant qu'elle serait multiplied par le nombre de millisecondes entre les eta pes, j'ai com- 
mence par une fraction reduite. J e I'ai ensuite ajustee unefois lejeu termine, jusqu'a obtenir 
un comportement de saut et de chute qui m'a semble naturel. 
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public class Platf ormGame extends MovieClip { 
// Constantes de mouvement 
static const gravity: Number = .004; 

// Bord pour le defilement 

static const edgeDistance:Number = 100; 

Lorsquele niveau dejeu estscanne, tous les objets trouvessont places dans deux tableaux. Le tableau 
fixedObjects contient les references a tous les objets sur lesquels le joueur peut tenir debout ou par 
lesquels il peut etre bloque. Le tableau otherobjects contient les elements comme la de (Key), la 

porte (Door), lecoffre (Chest) et lesjoyaUX (Treasure) : 
// Tableaux des objets 
private var fixedObjects:Array; 
private var otherObjects:Array; 

Le clip hero est deja nomme "hero" et est accessible depuis le code avec gameievei.hero. L'objet 
hero dans notre classe contient cependant cette reference et bien d'autres elements d'information 
concernantlepersonnagedu heros. Dela mememaniere, I e tableau enemies contient une I isted'objets 
avec des informations concernant chaque ennemi : 

// Heros et ennemis 
private var hero:Object; 
private var enemies:Array; 

Un certain nombre de variables sont requises pour tenir le registre de I'etape du jeu. Nous utiliserons 
piayerobjects comme tableau pour stacker des objets que lejoueur a ramasses. Le seul objet de ce 
type dans ce jeu est l'objet Key, mais nous le stockerons dans un tableau quoi qu'il en soit afin de 
prevoir le cas ou d'autres objets pourraient etre ajoutes. 

gamewiode est une chaine qui nous aidera a indiquer aux differentes fonctions ce qui est arrive au heros. 
Elle possedera d'abord la valeur "start" puis sera remplacee par "play" lorsque le jeu sera pret a 
commencer. 

gameScore et piayerLives correspondent au nombre de poi nts marques et au nombre de vi es restantes 
du joueur. 

La variable lastTime contient la valeur en millisecondes de la derniere etape de I'animation du jeu. 
Nous I ' uti I iserons pour cadencer I'animation temporelle utilisee par les elements du jeu : 

// Etat du jeu 

private var playerObjects:Array; 
private var gameMode: String = "start"; 
private var gameScore :int; 
private var piayerLives :int; 
private var lastTime: Number = 0; 
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Commencer la partie et le niveau 

Lorsque le jeu commence, nous avons besoin de certaines variables d'etat du jeu. Pour cela, nous 
appelons la fonction startPiatformGame avec I'image qui contient le premier niveau du jeu. Nous 
aurons d'autres variables qui doivent etre rei nitial i sees a chaque niveau. E lies sont definies lorsque le 
startGameLevei est appele a I'image suivante : 

// Demarrer le jeu 

public function startPiatformGame ( ) { 
playerObjects = new Array(); 
gameScore = 0; 
gameMode = "play"; 
playerLives = 3; 

} 

La Figure 11.9 presente I'ecran de demarrage du jeu, avec un bouton a cliquer pour continuer. 



Figure 11.9 

L'ecran de demarrage 
du jeu de plate-forme. 



ft PlatformGame.swf 



I Fichier Affichage Controle Deboguer 




Treasure, Qulst! 

Use the arrow keys to 
move left and right 
and the spacebar to 
jump. Land on top of 
enemies to destroy 
them. Get treasures 
and advance to the 
next level. 




La fonction startGameLevei 

La fonction startGameLevei est appelee a chaque image qui contient un clip gameievei. E He delegue 
ensuite les taches qui consistent a trouver et a configurer le heros, les ennemis et les objets du jeu : 

// Niveau de depart 

public function startGameLevel( ) { 
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// Creer les personnages 
createHero( ) ; 
addEnemies ( ) ; 

// Examiner le niveau et consigner tous les objets 
examineLevel( ) ; 

La fonction startGameLevei configure egalement trois ecouteurs evenementiels. Le premier est la 
fonction principale gameLoop, qui s'executera a chaque image afin de faire avancer I'animation. Les 
deux autres sont les ecouteurs evenementiels du clavier, dont nous avons besoin pour recuperer 
I ' entree de I ' uti I i sateur : 

// Ajouter les ecouteurs 

this .addEvent Listener (Event .ENTER_FRAME, gameLoop) ; 

stage. addEventListener ( KeyboardEvent .KEY_D0WN, keyDownFunction) ; 

st age. addEvent Listener (KeyboardEvent .KEY_UP,keyUpFunction) ; 

Pour finir, le gameiuiode est positionne a "play" et deux fonctions sont appelees pour configurer 
I'affichage du score et des vies. L'affichage du score est mis a jour avec un appel a addScore, qui 
ajouteun certain nombredepointsau score et met a jour le champ texte. Si nous ajoutonsO point, el le 
agitdonc commeune simple fonction d'affichage : 

// Configurer l'etat du jeu 
gameMode = "play" ; 
addScore(0) ; 
showLives( ) ; 

} 

La fonction createHero 

Le clip hero setrouve deja dans le clip gameievei, pret a operer. Nous devons cependant configurer 
et utiliser plusieurs proprietes. Nous creerons done un objet hero dans la classe pour y stacker ces 
proprietes : 

// Creer l'objet hero et definir toutes les proprietes 
public function createHero() { 
hero = new Object () ; 

La premiere propriete est une reference au clip qui est la representation visuelle du heros. Nous 
pouvonsdonc maintenant faire reference au heros en sped fi ant hero.mc plutot que gameievei. hero. 
Cette reference fonctionnera mieux lorsque nous utilisons l'objet hero pour nos manipulations du 
personnagedu joueur : 

hero.mc = gameievei. hero; 
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Viennent ensuite deux proprieties qui decrivent la velocitedu heros : 

hero.dx = 0.0; 
hero.dy = 0.0; 

La propriete hero. inAir se verra attribuer la valeur true lorsque le heros ne repose pas sur le sol ferme : 

hero.inAir = false; 

La propriete hero. direction vaudra -1 ou 1 selon le sens dans lequel le heros est oriente: 

hero. direction = 1 ; 

La propriete hero.animstate contiendra la valeur "stand" ou la valeur "walk". Avec la valeur "walk", 
nous saurons que le personnage doit executer sa sequence de marche. Les images de cette sequence 
sont stockees dans hero. waikAnimat ion. Ici, la sequence de marche se trouve dans les images 2 a 8. 
Pour memoriser I'etape qu'affiche actuellement I'ani mation, nous utiliserons nero.animstep : 

hero.animstate = "stand"; 

hero.walkAnimation = new Array(2,3,4,5,6,7,8) ; 
nero.animstep = 0; 

La propriete hero, jump vaut true lorsque lejoueurappuie sur la barred' espace. Delamememaniere, 
hero.moveLeft et hero.moveRight prennent les valeurs true et false selon la toucheflechee qui est 
enfoncee : 

hero. jump = false; 
hero.moveLeft = false; 
hero.moveRight = false; 

Les quelques proprietes suivantes sont des constantes uti I i sees pour determiner la hauteur du saut du 
personnage et la vitesse a laquelle il marche : 

hero. jumpSpeed = .8; 
hero.walkSpeed = .15; 

Les constantes hero. width et hero. height sont uti I i sees pour determiner les collisions. Au lieu 
d'utiliser la largeur et la hauteur effectives du personnage, qui varie selon I'image de I'animation 
affichee, nous utiliserons les constantes suivantes : 

hero. width = 20.0; 
hero. height = 40.0; 



v ' Ces constantes ont egalement ete definles a force de tentatives et d'ajustements. J 'ai com- 
mence par des valeurs qui semblaient coherentes, notammenten specifiant que le personnage 
il devait marcher environ 100 a 200 pixels par seconde. J 'ai ensuite ajuste ces parametres a 
cWto mesure que lejeu se construisait. 
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Lorsque le heros entrera en collision avec un objet, nous le reinitialiserons a sa position de depart dans 
le niveau. Nous devons done enregistrer cet emplacement pour I'utiliser a ce point : 

hero.startx = hero.mc.x; 
hero.starty = hero.mc.y; 

} 

La fonction addEnemies 

Les ennemis sont stockes dans des objets qui ressemblent simplement a I'objet hero. Comme les 
objets hero et enemy possedent les memes proprietes, nous pouvons les transmettre tous deux a la 

fonction moveCharacter. 

La fonction addEnemies recherche un clip nomme enemyi et I'ajoute au tableau enemies sous forme 
d'objet. E lie recherche ensuite enemy2, etainsi de suite. 

L'une des quelques differences entre les ennemis et le heros tient a ce que les premiers n'ont pas 
besoin des proprietes startx et starty. En outre, la propriete enemy. moveRignt commence avec la 
valeur true, afin que les ennemis commencent a marcher vers la droite : 

// Trouver tous les ennemis dans le niveau et creer un objet pour chacun 
public function addEnemies () { 
enemies = new Array(); 
var i:int = 1 ; 
while (true) { 

if (gamelevel[ "enemy"+i] == null) break; 

var enemy = new Object(); 

enemy. mc = gamelevel[ "enemy"+i] ; 

enemy. dx =0.0; 

enemy. dy =0.0; 

enemy. inAir = false; 

enemy. direction = 1 ; 

enemy. animstate = "stand" 

enemy .walkAnimation = new Array(2,3,4,5) ; 

enemy. animstep = 0; 

enemy. jump = false; 

enemy. moveRignt = true; 

enemy. moveLeft = false; 

enemy. jumpSpeed = 1.0; 

enemy .walkSpeed = .08; 

enemy. width = 30.0; 

enemy. height = 30.0; 
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enemies. push(enemy) ; 
i++; 

} 

} 

La fonction examineLevel 

U nefois que leheros ettous les ennemis ont etetrouves, la fonction examineLevel recherche tous I es 
enfants du clip gamelevel : 

// Rechercher tous les enfants du niveau et consigner les murs, les sols et les objets 
public function examineLevel() { 

fixedObjects = new Array(); 

otherObjects = new Array(); 

for(var i:int=0;i<this. gamelevel. numChildren; i++) { 
var mc = this. gamelevel. getChildAt(i) ; 

Si I'objet est un objet Floor ou un objetwaii, il est ajoute au tableau fixedObjects sous forme d'objet 
avec une reference au clip, maisegalementd'autres informations. Les emplacements desquatre cotes 
sont stockes dans leftside, rightside, topside et bottomside. Nous avons besoin de pouvoir y 
acceder rapidement au moment de determiner les collisions : 

// Ajouter les sols et les murs a fixedObjects 
if ((mc is Floor) II (mc is Wall)) { 

var floorObject: Object = new Object (); 

floorObject.mc = mc; 

floorObject. leftside = mc.x; 

floorObject. rightside = mc.x+mc. width; 

floorObject. topside = mc.y; 

floorObject. bottomside = mc.y+mc. height; 

fixedObjects. push(floorObject) ; 
All other objects are added very simply to the otherObjects array: 

// Ajouter les joyaux, le coffre, la cle et la porte a otherOjects 
} else if ((mc is Treasure) II (mc is Key) II 
(mc is Door) II (mc is Chest)) { 

otherObjects. push(mc) ; 

} 

} 

} 
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Entree clavier 

L' acceptation del' entree clavi erf onctionnera comme dans les precedents jeux, en uti I isant les touches 
flechees. Nous positionnerons cependant directement les proprietes moveLeft, moveRight et jump du 
hero. Nous n'autoriserons en outre jump a prendre la valeur true que si le hero nesetrouve pasdeja 
dans les airs : 

// Consigner appuis sur les touches, definir proprietes de hero 
public function keyDownFunction(event:KeyboardEvent) { 

if (gameMode != "play") return; // Ne pas bouger avant le mode jeu 



if (event. keyCode == 37) { 

hero. moveLeft = true; 
} else if (event. keyCode == 39) { 

hero. moveRight = true; 
} else if (event. keyCode == 32) { 

if ( Ihero.inAir) { 
hero. jump = true; 

} 

} 

} 

La fonction keyupFunction reconnait le moment ou le joueur relache la touche et desactive alors les 

drapeaux moveLeft et moveRight : 

public function keyUpFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 
hero. moveLeft = false; 
} else if (event. keyCode == 39) { 
hero. moveRight = false; 

} 



La boucle principale du jeu 

G race a I'ecouteur event_frame, la fonction gameLoop sera appeleeunefoi spar image. E lie determine 
le nombre de millisecondes qui se sont ecoulees depuis la derniere fois ou el I e a ete appelee. 

Si gameMode vaut "play", el I e appelle une variete de fonctions. Pour commencer, el I e appelle 
moveCharacter avec en parametre le hero comme objet, mais egalement timeDiff . 

Ensuite, el le appelle moveEnemies, qui s'occupe de parcourir en boucle tous les ennemis et appelle 
moveCharacter pour chacun d'entre eux. 



Chapitre 11 



Jeux d'action : jeux de plate-forme 41 1 



Lafonction checkForcoiiisions verra si desennemisentrenten collision avec le heros ou si le heros 
touche un objet. 

Pour finir, scroiiwithHero synchronisera, si necessaire, le clip gameievei avec la position du 
heros : 

public function gameLoop(event:Event) { 

// Calculer le temps ecoule 
if (lastTime == 0) lastTime = getTimer( ) ; 
var tineDiff:int = getTiner( ) -lastTime; 
lastTime += timeDiff; 

// Ne realiser des taches qu'en mode Jeu 
if (ganeMode == "play") { 

moveCharacter(hero, timeDiff ) ; 

moveEnemies (timeDiff ) ; 

checkCollisions( ) ; 

scrollWithHero( ) ; 

} 

} 

La fonction moveEnemies verifie les proprietes hitwaiiRight et hitwaiiLeft de chaque ennemi. II 
s'agit de proprietes speciales attributes a I'objet du personnage lorsque celui-ci est traite par 
movecharacter. Nous les utilisons non pas pour I'objet hero, mais pour les ennemis. 

Lorsqu'un ennemi touche un mur, nous inversons son sens de marche : 

public function moveEnemies (timeDiff :int) { 
for(var i:int=0;i<enemies.length;i++) { 

// Bouger 

moveCharacter(enemies[i] , timeDiff ) ; 

// Si l'ennemi rencontre un mur, changer de sens 
if (enemies[i] .hitWallRight) { 

enemies [ i] .moveLeft = true; 

enemies[i] .moveRight = false; 
} else if ( enemies [ i] .hitWallLeft) { 

enemies [i] .moveLeft = false; 

enemies[i] .moveRight = true; 

} 

} 

} 
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II pourra it etre souhaitable que differents ennemis possedent differents comportements. Par 
exemple, vous pourriez verifier si le heros se trouve a gauche ou a droite de I'ennemi et ne 
vous deplacer que dans ce sens. Vous pourriez sinon verifier la distance entre le heros et 
I'ennemi et ne bouger que si le heros est proche. 



Mouvement des personnages 

II est maintenant temps d'examinerlecceurdujeu : lafonction moveCharacter. Elleprend en parametre 
un objetdepersonnage, qu'il s'agissedu hero ou d'un enemy, etlestocke dans char. Elleprend aussi en 
parametre le nombre de millisecondes qui se sont ecoulees et le stocke dans timeDiff : 

public function moveCharacter(char:0bject, timeDiff :Number) { 

Au debut dujeu, la variable lastume est i nitialisee et letemps ecoule vaut 0. La valeurO neproduirait 
pas un resultat satisfaisant avec certains des calculs de velocite, aussi nous interrompons la fonction a 
ce point si timeDiff vaut 0 : 

if (timeDiff < 1) return; 



Si timeDiff vaut 0, verticaichange vaudra 0egalement. Si verticaichange vaut 0, la nouvelle 
position verticale et I'ancienne position verticale seront les memes, ce qui permet difficile- 
ment de savoir si le personnage repose sur lesol ou flotte dans les airs. 



La premiere chose que nous devons faire est de calculer le changement vertical du a la gravite. La 
gravite agit toujours sur nous, meme lorsque nous nous tenons debout sur le sol. Nous calculerons le 
changement de velocite et de position verticale du personnage en fonction de la constante gravity et 
du temps qui s' est ecoule. 

Pour determiner le changement sur I 'axe vertical en raison de la gravite dans I'animation temporelle, 
nous prenons la vitesse vertical eactuelle (char, dy) et I a multi pi ions par timeDiff. Cecal cul concerne 
la vitesse vers le haut ou vers le bas du personnage. 

Ensuite, nous ajoutons timeDiff multiplies par gravity pour determiner la distance parcourue depuis 
que la derniere vitesse verticale (dy) a ete misea jour. 

Ensuite, nous modifions la vitesse verticale pour la suite en ajoutant gravity*timeDiff : 

// Le personnage est tire vers le bas par la gravite 

var verticaichange: Number = char.dy*timeDiff + timeDiff *gravity; 

if (verticaichange > 15.0) verticaichange = 15.0; 

char.dy += timeDiff *gravity; 
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V 



Vous remarquerez que vemcaichange est limitee a 75.0. II s'agit de ce que Ton appelle la 
velocite terminale. Dans la vie, cela se produit lorsque la resistance au vent contrecarre 
I'acceleration due a la gravite et que I'objet ne peut plus tomber plus vite. Nous ajoutons 
cette limite ici parce que, si le personnage tombe d'une grande distance, il accelerera sa 
chute assez sensi bl ement et I ' effet vi suel neparaltra pasnaturel. 



Avant d'examiner les mouvements vers la gauche et la droite, nous allons operer quelques presup- 
positions concernantce qui va se passer. Nous supposerons que I'etat de ranimation sera "stand" et 
quelenouveausensdeprogressiondupersonnageseralememequelesensactuel.Nouspresupposerons 
egalement qu'il n'y aura pas de changement horizontal de position : 

// Reagir aux changements d'appui sur les touches 

var horizontalChange = 0; 

var newAnimState: String = "stand"; 

var newDirection:int = char. direction; 

Ensuite, nous verifierons immediatement le bien-fonde de cette presupposition en examinant les pro- 

prietes char.moveLeft et char.moveRight. Elles auront ete definies dans la fonction keyDownFunction 

si le joueur enfonce la touche flechee de gauche ou de droite. 

Si la touche de gauche est enfoncee, horizontalChange se voit attribuer la valeur char.waikspeed 
*timeDiff en negatif . En outre, newDirection prend la valeur -1. Si I a touche de droite est enfoncee, 

horizontalChange se voit attribuer la valeur char.walkSpeed*timeDiff positive et newDirection 

prend la valeur 1. Dans les deux cas, newAnimState recupere la valeur "walk" : 

if (char.moveLeft) { 

// Marche vers la gauche 

horizontalChange = -char.walkSpeed*tineDiff ; 

newAnimState = "walk"; 

newDirection = -1 ; 
} else if (char.moveRight) { 

// Marche vers la droite 

horizontalChange = char.walkSpeed*timeDiff ; 

newAnimState = "walk"; 

newDirection = 1 ; 

} 

La prochaine verification que nous allons operer concerne char, jump, qui se verra attribuer la valeur 
true lorsque lejoueur appuie sur la barre d'espace. N ous reattribuerons immediatement la valeur false 
afin que cette action neseproduisequ'uneseulefoispar appui sur la barre d'espace. 

E nsuite, nous changerons char . dy en lui attribuant la valeur en negatif de la constante char . j umpspeed. 
Ce reglage donnera au personnage un elan vers le haut correspondant a la force initiale du saut. 
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Nousdonneronsaussi a newAnimstate lavaleur "jump". La Figure 11.10 montrel'etatdesautdu heros. 




Figure 11.10 

Le heros prend cette apparence 
a chaque fois qu'il est en I'air. 



if (char. jump) { 
// Debut du saut 
char. jump = false; 
char.dy = -char. jumpSpeed; 
verticalChange = -char. jumpSpeed; 
newAnimState = "jump"; 

} 

Nous sommes maintenant sur le point d'examiner les fixedObjects dans la scene afin de verifier les 
collisions de mouvements. Avant cela, nous presupposerons qu'il n'y a pas de collision avec un mur 
de gauche ou de droiteet que le personnage reste en I'air : 

// Presupposition : pas de choc contre un mur et suspension en I'air 
char.hitWallRight = false; 
char.hitWallLeft = false; 
char.inAir = true; 

Nous calculeronsla nouvel le position verticaledu personnage en fonction dela position actuelleetde 
la variable verticalChange definie precedemment : 

// Calculer la nouvelle position verticale 
var newY:Number = char.mc.y + verticalChange; 
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Nous al Ions maintenant examiner chaqueobjet fixe et voir si I'un d'entreeux setrouvesous les piedsdu 
personnage. Pour cela, nous commencons par voir si le personnage est aligne horizontal ement avec 
I'objet. S'il esttrop loin a gauche ou adroite, nous pourrons cesser imme^iatementd'examiner I'objet. 

La Figure 11.11 presente une illustration du probleme. Le rectangleA presente le personnage dans la 
position actuelle et le rectangle B , dans sa prochaine position. Vous pouvez remarquer que le bas du 
personnage setrouvejusteau-dessusdu sol dans A eten dessousdans B. 



Figure 11.11 

En une etape, le personnage 
passerait au travers du sol si 
notre code ne I'arretait pas. 




Nous verrons ensuite si le personnage est actuellement au-dessus de I'objet et si son emplacement 
newY est en dessous. Cela signifie que le personnage passerait normalement au travers de I'objet. 
Rappelez-vous que le point d'alignement des personnages se trouve a I'extremite inferieure de leurs 
pieds et que celui des murs et des sols se trouve a leur extremite superieure. 

A u lieu de I aisser I e personnage traverser I'objet, nousallonslestopperdirectementalasurfacesuperieure 
de I'objet. La proprietecnar.dy sera positionneea 0 et la proprietechar.inAir, a false : 

// Parcourir en boucle tous les objets fixes et voir si le personnage a atterri 
for(var i:int=0;i<fixedObjects.length;i++) { 

if ( (char. mc.x+char. width/2 > fixedObjects[i] .leftside) && (char. mc.x-char. width/2 
< fixedObjects[i] .rightside)) { 

if ( (char.mc.y <= fixedObjects[i] .topside) && (newY > fixedObjects[i] .topside) ) { 

newY = fixedObjects[i] .topside; 

char.dy = 0; 

char.inAir = false; 

break; 

} 

} 

} 
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Pendant qu'un personnage repose sur le dessus d'un objet Floor ou wan, ce test vertical est 
^ realise a chaque etape et a chaque etape il aura pour resultat de conserver le personnage 
au-dessus du sol. 



Nous realiserons ensuite un test similaire avec la position horizontale. Nous creerons une variable 
newx avec le nouvel emplacement horizontal, en supposant qu'il n'y a pas de collision : 

// Trouver nouvelle position horizontale 

var newX:Number = char.mc.x + horizontalChange; 

Nous examinerons maintenant chacun des objets wail et Floor et verrons si aucun ne correspond 
vertical ement. Si c'est le cas, nous verrons s'ils sont traverses avec la transition al I ant de la position 
courantea la nouvelle. 

Nousdevons verifier le cote gauche et le cote droit. Si I'un des tests vaut true, la position x est definie 
demanierea correspondreexactement au mur et char.hitwaiiLeft ou char.hitwaiiRight prend la 
valeurtrue : 

// Parcourir en boucle tous les objets pour voir si en ligne personnage est rentre 
dans un mur 

for(i=0;i<fixedObjects.length;i++) { 

if ((newY > fixedObjects[i] .topside) && (newY-char. height < fixedObjects[i] .bottonside)) { 

if ( (char. mc.x-char. width/2 >= fixedObjects[i] .rightside) && (newX-char. width/2 
<= fixedObj ects [ i] .rightside)) { 

newX = fixedObjects[i] . rightside+char. width/2; 

char.hitwaiiLeft = true; 

break; 

} 

if ( (char. mc.x+char. width/2 <= fixedObjects[i] .leftside) && 
(newX+char. width/2 >= fixedObjects[i] .leftside) ) { 
newX = fixedObjects[i] .leftside-char. width/2; 
char.hitwaiiRight = true; 
break; 

} 

} 

} 

Nous connaissons maintenant la nouvelle position du personnage, en tenant compte de la vitesse 
horizontale et verticale, de la gravite et des collisions avec le sol et les murs. Nous pouvons definir 
I'emplacement du personnage : 

// Definir I'emplacement du personnage 
char.mc.x = newX; 
char.mc.y = newY; 
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Lerestedelafonction s'occupedel'apparencedu personnage. Nousverifions la valeur char.inAir ; 
si ellevauttrue acestade, nous devons dormer a newAnimstate la valeur "jump" : 

// Definir l'etat de 1' animation 
if (char.inAir) { 

newAnimState = "jump"; 

} 

Nous avons done fini de changer newAnimstate. Cette variable a demarre avec la valeur "stand". 
Ensuite, el I e est passee a "walk" si latoucheflecheedegaucheoudedroiteaeteenfoncee. Elleapu 
aussi passera "jump" si lejoueur a appuyesur la barre d'espaceou si le personnage setrouvait dans 
lesairs. N ous allons maintenant definir l'etat de 1'animation (animstate) en lui attribuant la valeur de 

newAnimState : 

char. animstate = newAnimState; 

Ensuite, nous utiliserons animstate pour decider de I'apparence a donner au personnage. Si celui-ci 
marche, animstep est augmentee d'une fraction de timeDiff et une verification est operee pour voir 
si animstep doit reboucler vers 0. Ensuite, I'image du personnage est definie en fonction de eel le 

specifiee dans walkAnimation : 

// Avancer dans le cycle de marche 
if (char. animstate == "walk") { 
char. animstep += timeDiff /60; 
if (char. animstep > char. walkAnimation. length) { 
char. animstep = 0; 

} 

char. mc.gotoAndStop( char . walkAnimation [Math, floor (char. animstep) ] ) ; 

If the character is not walking, we'll set the frame to either "stand" or "jump" 
depending on the value of animstate: 

// Pas de marche, afficher l'etat debout ou saut 

} else { 

char. mc.gotoAndStop( char .animstate) ; 

} 

La dernieretachedont moveCharacter doit se charger est de definir I' orientation du personnage. La 
propriete direction vaut -1 pour s'ori enter vers la gauche et 1 pour s'ori enter vers la droite. Nous la 
remplirons avec la valeur de newDirection qui a ete determinee precedemment. Ensuite, nous 
definirons la propriete scaiex du personnage. 



Le positionnement de la propriete scaiex d'un sprite ou d'un clip constitue un moyen 
simple de renverser n'importe quel objet. Toutefois, si vous avez des ombres ou des effets 
3D dans les graphismes de I'objet, vous devez dessiner une autre version de I'objet qui 
pointe dans la direction opposee ; sans cela, le personnage inverse ne presenterait pas 
I'apparence souhaitee. 
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// Directions modifiees 

if (newDirection != char. direction) { 

char. direction = newDirection; 

char.mc.scaleX = char. direction; 

} 

} 

Defilement du niveau du jeu 

scroiiwithHero est une autre foncti on qui s' execute a chaque image. Elle verifie la position du heros 
par rapport a la scene. stagePosition est calculee en ajoutant gameievei.x a hero.mc.x. Ensuite, 
nousobtenonsegalement rightEdge et leftEdge en fonction des bordsde I'ecran, moins la constante 
edgeDistance. C'est a ces points que I'ecran commence a defiler si besoin. 

Si le heros depasse le bord droit (rightEdge), la position du niveau (gameievei) est deplacee de la 
meme distance vers la gauche. Si gameievei arrive trop loin a gauche, il est cependant empeche 
d'avancer afin que I'extremite droite de gameievei se trouve du cote droit de la scene. 

De la meme maniere, si le heros est assez loin a gauche, le clip gameievei avance a droite, mais au 
maximum jusqu'au moment ou le cote de gameievei passerait a droite du cote gauche de I'ecran : 

// Faire defiler vers la droite ou la gauche en cas de besoin 
public function scrollWithHerof) { 

var stagePosition: Number = gameievei. x+hero.mc.x; 

var rightEdge:Number = stage. stageWidth-edgeDistance; 

var leftEdge:Number = edgeDistance; 

if (stagePosition > rightEdge) { 

gameievei.x -= (stagePosition-rightEdge) ; 
if (gameievei.x < - (gameievei. width-stage. stageWidth) ) 
gameievei.x = - (gameievei. width-stage. stageWidth) ; 

} 

if (stagePosition < leftEdge) { 

gameievei.x += (leftEdge-stagePosition) ; 
if (gameievei.x > 0) gameievei.x = 0; 

} 

} 

Verifier les collisions 

LafonctioncheckCoiiisionsparcourtenboucletouslesennemisettouslesautresobjets(otherOb]'ects). 
Elle utilise une fonction hitTestobject simple pour chaque objet afin de real iser les tests de collision. 
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Si la collision du hero et del' enemy i ntervi ent pendant que I e hero setrouveen I'airet progresse vers le 
bas, I'ennemi est detruit en appelant enemyDie. Si ce n'est pas le cas, nous appelons heroDie a la place : 

// Verifier les collisions avec les ennemis et les objets 
public function checkCollisions( ) { 

// Ennemis 

for(var i:int=enemies.length-1 ;i>=0;i- -) { 

if (hero.mc.hitTestObject(enemies[i] .mc) ) { 

// Le heros saute-t-il vers le bas sur I'ennemi ? 
if (hero.inAir && (hero.dy > 0)) { 

enemyDie(i) ; 
} else { 

heroDie() ; 

} 

} 

} 

Si le hero entre en collision avec un objet dans la liste otherobjects, nous appelons getobject en 
lui passant le numero de I' element dans la liste : 

// Objets 

for(i=other0bjects.length-1 ;i>=0;i--) { 

if (hero.mc.hitTestObject(otherObjects[i] ) ) { 
getObject(i) ; 

} 

} 

} 

Mort des ennemis et du joueur 

Lorsqu'un objet enemy est detruit, il est supprime du clip gameievei et de la liste enemies. II n'y a 
besoin de rien d'autre pour lefairedisparaitre. 

Nous allons tout de meme inserer un effet special. En utilisant la classe PointBurst du C hapitre 8, 
nous ferons apparaitre un petit message a I'endroit ou I'ennemi a ete supprime, en affichant les mots 
"Got Em!" (Touches !). La Figure 11.12 presente I'ecran juste apres que I'ennemi a ete detruit. 

// Supprimer I'ennemi 

public function enemyDie(enemyNum:int) { 

var pb:PointBurst = new PointBurst (gameievei, 
"Got Em! " ,enemies[enenyl\lum] .mc.x, 
enemies [enemyNum] .mc.y-20) ; 

gameievei. removeChild( enemies [enemyNum] .mc) ; 

enemies .splice (enemyNum, 1 ) ; 

} 



420 ActionScript 3.0 pour les jeux 




Figure 11.12 

Les mots "Got Em!" apparaissent 
a I'endroit ou se trouvait I'ennemi, 
changentde taille etdisparaissent 
rapidement. 



Pour utiliser la classe PointBurst, vous devez en fa ire glisser une copie dans le meme dos- 
sier que les fichiers PlatformGame.fla et PlatformGame.as. Vous aurez aussi besoin 
d'ajouter la police Arial a la bibliotheque de PlatformGame.fla et de la configurer de 
maniere a I'exporter pour ActionScript. 



Lorsque lejoueur meurt apres etre entredans un ennemi, nous avons 1'opportunite d'afficher la boite 
de dialogue congue precedemment. 

Pour creer la boite de dialogue, il nous suffit de creer un nouvel objet Dialog et de I'attribuer a une 
variable temporaire. Ensuite, nousdefinissons les positions x et y et utilisons addChiid pour le placer 
dans la scene. 

Nous verifions apres cela le nombre de vies du joueur (player-Lives). S'il est nul, nous affichons le 
texte "Game Over!" (partie terminee) dans la boite de dialogue et donnons a gameMode la valeur 
"gameover". S'il reste des vies, nous soustrayons une unite au compte, affichons le message "HeGot 
You!" (il vous a eu) et donnons a gameMode la valeur "dead". 

La variable gameMode joue un role important quant a ce qui se passe lorsque le joueur clique sur le 
bouton dans la boite de dialogue : 

// L 1 ennemi a eu le joueur 
public function heroDie() { 

// Afficher la boite de dialogue 

var dialog: Dialog = new DialogO; 

dialog. x =175; 

dialog. y = 100; 

addChild(dialog) ; 
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if (player-Lives == 0) { 

gameMode = „gameover"; 

dialog. message. text = „Game Over!"; 
} else { 

gameMode = „dead" ; 

dialog. message. text = „He Got You!"; 
playerLives- - ; 

} 

hero.mc.gotoAndPlay(„die" ) ; 

} 

La derniere tache dont s'occupe la fonction heroDie consistea demander au clip hero de s'executer 
a parti r de I' image die. Cette fonction commence une animation qui montre le personnage qui tombe 
en arriere. U ne commande stop figure a la fin du scenario de hero afin que le clip ne boucle pas pour 
revenir au debut. La Figure 11.13 montre le heros mort et la boite de dialogue. 



Figure 11.13 

Le heros est mort et le joueur doit 
maintenant cliquer sur le bouton 
pour commencer une nouvelle vie. 



PlatformGame.swf 



Fichier Affichage Controle Deboguer 



-EVEL: 1 



LIVES: 3 



SCORE: 0 



Collecter des points et des objets 

Lorsque le joueur entre en collision avec un objet du tableau otherobjects, il obtient des points, 
recupere un objet dans son inventaire ou termine le niveau. 
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Si le type del'objet est Treasure, lejoueurrecuperelOO points. Nous utiliserons la classePointBurst 
a nouveau pour afficher letexte 100 a I 'emplacement concerne. Ensuite, noussupprimerons I'objetde 
gameievei et de otherObjects. Nous appellerons la fonction addScore pour ajouter 100 points et 
mettrons ajour le score: 

// Le joueur entre en collision avec des objets 
public function get0bject(objectNum:int) { 

// Attribuer des points pour les joyaux 
if (other0bjects[objectNum] is Treasure) { 

var pb:PointBurst = new PointBurst(gamelevel,100, 
otherObjects[objectl\lum] .x, otherObjects [objectNum] .y) ; 

gameievei. removeChild( otherObjects [objectNum] ) ; 
otherObjects. splice (objectNum, 1 ) ; 
addScore (100) ; 

L'une des solutions simples pour avoir differentes valeurs de point pour les differents joyaux 
consiste a utiliser le nom d' instance de I'objet Treasure. En I'etat du jeu, ce nom n' est utilise 
par rien d'autre. Vous pourriez done attribuer le nom "100" a un objet Treasure et "200" a 
un autre. Ensuite, il suffirait d'examiner otnerobj ects [numob jet] .name pour attribuer le 
nombre de points correspondant. 




Si I'objet est une de (Key), nous utilisons PointBurst pour afficher le message "Got Key!" (C le 
recuperee!). Nous ajoutons la chaine "Key" au tableau piayerobjects qui sert d'inventaire. L'objet 

est ensuite SUpprime de gameievei et otherObj ects : 

// Cle recuperee, ajouter a l'inventaire 

} else if (otherObjects[objectNum] is Key) { 

pb = new PointBurst(gamelevel, "Got Key! " ,otherObjects[objectNum] .x, otherObjects 
[objectNum] .y) ; 

playerObj ects . push ( "Key" ) ; 

gameievei. removeChild(otherObjects[objectNum] ) ; 

otherObjects. splice(objectNum,1 ) ; 

L'objet peut aussi etre une porte (Door). Dans ce cas, nous exami nons I' i nventai re piayerob j ects afin 
de verifier si I' element "Key" y figure. Si le joueur a eu la cle, la porte s'ouvre. Nous ferons cela en 
demandant au clip Door de lancer sa lecture a partir de I'image open. Ensuite, nous appellerons 
leveicompiete, qui affiche une boite de dialogue : 

// Porte atteinte, terminer le niveau si le heros a la cle 
} else if (otherObjects[objectl\lum] is Door) { 

if (playerObjects.indexOf ("Key") == -1) return; 

if (otherObjects[objectNum] .currentFrame == 1) { 
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otherObjects[objectNum] .gotoAndPlay( "open" ) ; 
levelComplete( ) ; 

} 

La derniere possibility est que le joueur ait trouve le coffre (chest). Ce cas signale la fin du second 
niveau etlafin de la quetedu joueur. Ceclip possedeegalementune image open, maisnousutiliserons 
gotoAndStop car il n'y a pas d'animation a cet endroit. Ensuite, nous appelons gameCompiete : 

// Coffre trouve, j eu gagne 

} else if (otherObjects[objectl\lum] is Chest) { 

otherObjects[objectNum] .gotoAndStop( "open" ) ; 

gameCompiete () ; 

} 

} 

Afficher I'etat du joueur 

II est maintenant temps de considerer certaines fonctions utilitaires. Ces fonctions sont appelees a 
differents endroits dans lejeu en cas de besoin. La premiere ajoute un certain nombre de points a la 
variable gameScore, puis met a jour le champ texte scoreDispiay dans la scene : 

// Ajouter des points au score 

public function addScore(numPoints:int) { 

gameScore += numPoints; 

scoreDispiay. text = String(gameScore) ; 

} 

La fonction qui suit place la valeur de piayerLives dans le champ texte livesDispiay : 

// Mettre a jour les vies du joueur 
public function showLives() { 

livesDispiay. text = String(playerLives) ; 

} 

Terminer les niveaux et le jeu 

Le premier niveau setermine lorsque le joueur recuperela cleetouvre la porte. Le second setermine 
lorsque le joueur trouve le coffre du tresor. Dans les deux cas, un objet Dialog est cree et place au 
centre de Tec ran. 

Dans le cas ou la porte est ouverte et le niveau un, termine, la boite de dialogue affiche le message 
"Level Complete!" (niveau termine) et gameMode se voit attribuer la valeur "done" : 

// Niveau termine, afficher la boite de dialogue 
public function levelComplete( ) { 

gameMode = "done" ; 

var dialog: Dialog = new Dialog () ; 
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dialog. x =175; 
dialog. y =100; 
addChild(dialog) ; 

dialog. message. text = „Level Complete!"; 

} 

Si le deuxieme niveau se termine apres que le joueur a trouve le coffre, le message "You Got the 

Treasure!" apparaTt et gameMode recupere la valeur "gameover" : 
// Partie terminee, afficher la boite de dialogue 
public function gameComplete( ) { 

gameMode = "gameover"; 

var dialog: Dialog = new DialogO; 

dialog. x =175; 

dialog. y = 100; 

addChild(dialog) ; 

dialog. message. text = „You Got the Treasure!"; 

} 

La boite de dialogue du jeu 

La boite de dialogue apparait lorsque le joueur est mort, atermineun niveau ou afini lejeu. Lorsque 
lejoueur cliquesur le bouton decette boTtededialogue, nousappelonslafonction ciickDiaiogButton 
dans la classe principale. Voici lecodequi se trouve dans I'objet Dialog : 

okButton .addEventListener(MouseEvent .CLICK, MovieClip( parent) .ciickDiaiogButton) ; 

La premiere tache dont se charge la fonction ciickDiaiogButton consiste a supprimer la boite de 
dialogue elle-meme : 

// Le joueur a clique sur le bouton de la boite de dialogue 
public function clickDialogButton(event:MouseEvent) { 
removeChild (MovieClip ( event . currentTarget . parent ) ) ; 

Sa prochaine action depend de la valeur de gameMode. Si lejoueur est mort, I'affichagedu nombrede 
vies est mis a jour, le herosest replace au debut du niveau et gameMode recupere de nouveau la valeur 
"play" afin que lejeu se poursuive: 

// Nouvelle vie, recommencer ou passer au niveau suivant 
if (gameMode == "dead") { 

// Reinitialisation du heros 

showLives( ) ; 

hero.mc.x = hero.startx; 
hero.mc.y = hero.starty; 
gameMode = "play"; 
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Si gamewiode vaut "gameover" (ce qui se produit lorsque le joueur meurt pour la derniere fois ou 
lorsquelejoueurtrouve lecoffre), nous appelons la fonction cleanup pour supprimerleclipgameievei 
et nous ramenons I' animation au debut : 

} else if (gameMode == "gameover") { 
cleanup) ) ; 

gotoAndStop( "start" ) ; 

L'autre possi bi lite concerne le cas ou gameMode vaut "done". Cela signifie qu'il est temps de passer au 
niveau suivant. La fonction cleanup est appelee de nouveau et I'animation est envoyee a I'image 
suivante, ou une nouvelle version de gameievei attend : 

} else if (gameMode == "done") { 
cleanUp( ) ; 
nextFrame( ) ; 

} 

L'une des dernieres choses a effectuer consiste a ramener le focus du clavier sur la scene. La scene 
perd le focus lorsque I'utilisateur clique sur le bouton. Nous souhaitons nous assurer que les touches 
flechees et la barre d'espace seront de nouveau acheminees vers la scene : 

// Redonner a la scene le focus clavier 
stage. focus = stage; 

} 

La fonction cleanup, qu'appelle la fonction ciickDiaiogButton, supprime le gameievei ainsi que 
les ecouteurs qui etaient appliques a la scene et I'ecouteur enter_frame. Ces ecouteurs seront recrees 
dans startLevei si le joueur doit passer au niveau suivant : 

// Nettoyer le j eu 
public function cleanUp() { 
removeChild (gameievei) ; 

this. removeEvent Listener (Event . ENTER_FRAME,gameLoop) ; 

stage. removeEventListener(KeyboardEvent .KEY_DOWN, keyDownFunction) ; 

stage. removeEvent Listener (KeyboardEvent .KEY_UP,keyUpFunction) ; 

} 



Modifier le jeu 

Pour que ce jeu devienne vraiment palpitant, il conviendrait d'y ajouter d'autres niveaux contenant 
plus d'elements. Vous pouvez ajouter autant de niveaux que vous le souhaitez. 

Pour I'instant, le premier niveau se termine lorsque la cle est dans I'inventaire et que la porte est 
trouvee. II pourrait etre interessant de modifier le code afin d'ajouter d'autres options, par exemple 
avec une porte qui nerequiertpasdecleou une porte qui en necessite plusieurs. 
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L'autre fonctionnalite qui pourrait rendre le jeu plus attrayant consisterait a avoir plus de moyens de 
mourir. Pour I' instant, il n'est possible de mourir que si un ennemi vous touche alors que vous ne 
sautez pas et il est assez facile de se debarrasser des ennemi s. 

Que se passerait-il en revanche si des pierres ou des objets pouvaient vous tuer egalement? Par 
exemple, la scene pourrait contenir des fosses de lave animee qu'il faudrait imperativement sauter 
sans les toucher pour parvenir au but. 

II pourrait aussi y avoir d'autres obstacles animes, comme des Heches qui jaillissent des murs. Ces 
objets se comporteraient comme des ennemis, mais "mourraient" en atteignant le mur oppose. Vous 
pourriez aussi definir un Timer pour creer une nouvelle fleche a intervalles reguliers. 

Les possi bil ites sont quasi ment infinies. Pourtant, s'il est aisede creer un jeu de pi ate-f orme creatif et 
amusant, il est tout aussi facile d'en creer un mauvais. Concevez done soigneusement votre jeu et 
testez et ajustez-le au fur et a mesure. 



Jeux de mondes : jeux de 
conduite et d'exploration 

Au sommaire de ce chapitre 

• Creer un jeu de conduite en vue aerienne 

• Creer un jeu de course 
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Au chapitre precedent, vous avez vu comment il etait possible de creer un petit monde a I'interieur 
d'unjeu ActionScript. Cetypedejeu de plate-forme creeunevuelaterale qui estsouvent uti Usee pour 
les jeux d'aventure en interieur et les quetes. 

U n autre type de jeu de monde peut etre cree avec une vue aerienne. Le joueur se deplace alors dans 
une carte. Ce type de representation peutconvenira n'importequel genre de scenario etdetheme.J'ai 
cependant recemment remarque qu'il existait un grand nombre de jeux de ce genre ou le joueur 
conduisait un vehicule dans une ville ou une autre sorte desite exterieur. 

Dans ce chapitre, nous allons creer un jeu de conduite en vue aerienne et un jeu de course simple. Ces 
deux types de jeux ont un certain nombre de points communs. 



Creer un jeu de conduite en vue aerienne 

Creons un jeu de conduite simple en vue aerienne. Cejeu contient une carte detail lee, une voiture, des 
objetsa ramasseretunelogiquedejeu complexequi impliqueun emplacement ou deposerlesobjets 
collectes. 



Codes sources 
^^>c http://flashgameu.com 

A3GPU12 TopDownGame-zip 



Creer un jeu en vue aerienne 

Notre jeu d'exemple pour ce chapitre met en scene un campus de lycee. Une zone de trois blocs sur 
trois inclut differents immeubles qui remplissent I'espace entre les rues (voir Figure 12.1). 

Si vous examinez attentivement la grille en bas de la carte, vous verrez une petite voiture. II s'agit de 
la voiture du joueur, qu'il peut "conduire" dans la carte. 

Vu les dimensions de la carte, lejoueur ne pourra pas en voir plus d'une petite section a la fois. La 
carte fait 2 400 pixels carres et I'ecran n'en fait que 550 x 400. 

A mesure que lejoueur conduit, la carte se repositionneen conservant la voiture exactement au centre 
dela scene. 

La Figure 12.2 presente I'ecran lorsque lejoueur commence. Vous pouvez voir la grille en bas et une 
portion du parking au-dessus. U ne bande semi-transparente avec les elements du score apparait en bas. 

L a carte est I ogee dans sa total ite dans un unique cl i p nomme GameMap. A I ' i nterieur, les neuf groupes 
d'immeubles possedent chacun leur propre clip pour des raisons pratiques d'organisation. Les rues 
sont composees de morceaux droits et de trois differents types de coins. La cloture externe est 
constitute de differentes pieces egalement. 
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Tous ces elements graphiques ne sont la que pour la decoration, lis n'importent pas pour le code du 
jeu. Voila une excellente nouvelle pour les graphistes, car cela signifie qu'ils ont toute liberte pour 
creer I'arriere-plan artistique pour lejeu. 

La voiture pourra sedeplacer n'importeou dans I'ecran avec quelques restrictions simples. 

Pour commencer, la voiture sera contrainte de rester dans les limites internes de la cloture. Cette 
contrainte sera definie par des valeurs x et y minimal es et maximales. 

Ensuite, la voiture sera empechee d'entrer dans la zone de certains autres clips. Nous les appellerons 
Blocks. Si la voiture entre en collision avec I'un deces Blocks, el I e sera stoppeea son bord. 

Les neuf Blocks seront places sur les neuf blocs de ville dans la carte. La Figure 12.3 signale leurs 
emplacements avec des bordures epaisses. 



Le terme bloc possede trois significations. La plus importante est qu'll bloque la voiture en 
I'empechant d'entrer dans la zone. II represente cependant aussi des blocs d'immeubles dans 
cette carte. Enfin, il est de forme rectangulaire. 




Figure 12.3 

Les neuf clips Block 
sontici reperes par 
des bordures epaisses. 




Le but du jeu est de recolter les ordures dans le campus et de les deposer dans les bennes de recyclage. 
1 1 y aura trois bennes a ordures dans trois des coins du campus. 
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II y aura trois types d'ordures, un pourchaquebenne: lescanettes, lespapiersetles bouteil les, 

A u lieu de placer manuellement les ordures dans la carte, nous chargerons notrecodedelefaire. Celui- 
ci placera cent ordures differentes de maniere aleatoire dans le campus. Nous devons nous assurer que 
ces ordures n'apparaissent pas sur les Blocks, sans quoi la voiture ne pourrait les atteindre. 

Le defi consiste a ramasser toutes les ordures et a deposer chaque type dans sa propre benne. La 
voiture ne peut cependant contenir quedix ordures differentes a la fois. Avant de pouvoir en ramasser 
d'autres, le joueur devra done commencer par en deposer dans les bennes. 

Lejeu se complique ainsi parce que le joueur devra decider le type d'ordure a ramasser en fonction 
dela benne qu'il souhaite atteindre pour les y deverser. 

Conception du jeu 

II vaut la peine d'examiner tous les intrants, les objets et les mecanismes du jeu avant de commencer 
a programmer notre code. Cela nous permettra de clarifier ce que nous faisons. 

Controle de la voiture 

La voiture sera controlee par les touches flechees. En fait, seules trois des quatre touches flechees 
seront requises. La Figure 12.4 presente le clip car. 



Figure 12.4 

Le clip car pointe vers la droite ; 
valeur rotation 0 correspond done 
a la direction que M ath.cos et 
M ath.sin represented. 
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Nous nesommes pas en train decreer un jeu de simulation ; nous pouvonsdonc ignorer I 'acceleration, 
lefreinageetla marchearriere pour autant que lejoueurn'en a pas besoin. Dans I ecas present, il suffit 
de pouvoir tourner a gauche et a droite et d'avancer pour s'ori enter. 

Nous utiliserons les touches flechees de gauche et de droite pour modifier directement la propriete 
rotation de la voiture. Ensuite, nous utiliserons les valeurs Math. cos et Math. sin de la rotation 
pour definir I'orientation du mouvement en avant. Cette approches'apparentea celle que nous avons 
adoptee avec les touches flechees et la trigonometrie dans le jeu de meteorites du Chapitre 7. 

Limites de la voiture 

La voiture est limitee a rouler sur les rues. Plus exactement, la voiture ne peut pas quitter la carte et ne 
peut pas rouler dans la zonede I'un des clips Block. Leclip Block est presentea la Figure 12.5. 



Figure 12.5 

Le Block ne se voit jamais dans le 
jeu ; seuls nous le voyons pendant 
la conception du niveau. U ne fine 
bordure rouge et un remplissage 
semi-transparent nous aident a le 
positionner. 
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Pour cela, nous comparerons le rectangle de la voitureaux rectangles des objets Block. N ous obtiendrons 
une liste de ces objets lorsque le jeu demarre. Si le rectangle de la voiture et I'un de ceux des Blocks se 
recoupent, nous repousserons la voiture au point ou ellesetrouve, juste a I'exterieur du Block. 

Ce mecanisme est semblable a celui que nous avons utilise pour le jeu de casse-brique du Chapitre 5. 
Au lieu de faire rebondir la voiture sur le Block, nous la positionnerons parfaitement de maniere 
qu'ellese trouve exactement a I'exterieur du Block. 
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Ordures 

Les ordures correspondent en fait a un unique clip TrashObject detrois images. Nous les placerons 
de maniere aleatoire dans la carte, en nous assurant qu'aucun ne se trouve place sur les Blocks. 

Lorsqu'un element est place, il est aleatoirement conduit a I'image 1, 2 ou 3, qui represented chacune un 
destrois types d'ordures : canettes, papiersou bouteilles. La Figure 12.6 presente le clip TrashObject. 

A mesure que la voiture se deplace, nous verifions si la distance entre chaque TrashObject et la 
voiture est assez reduite pour que la voiture le ramasse. 

Nous supprimerons ces objets de I'ecran ettiendrons le registredu nombre d'ordures de chaque type 
ramasse par lejoueur. N ous limiterons ce nombre a dix objets a la fois et indiquerons au joueur quand 
la voiture est pleine. 

Lorsque lejoueur se rapprochera ensuite suffisamment d'une benne, nous ramenerons a zero le type 
d'ordure correspondant dans la collection du joueur. Les joueurs astucieux rempliront leur voiture 
avec un meme type d'ordure et iront deposer les dix elements dans la benne appropriee. 



Figure 12.6 

Le clip TrashObject contient trois 
images differentes, chacune avec 
un type d'ordure different. 
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Score et chronometre du jeu 

L es indicateurs de score (voi r en bas de la F igure 12.7) sont plus i mportants dans ce jeu que dans ceux 
que nous avons creesj usque-la. Lejoueur doit y preter attention. 
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Figure 12.7 

Les indicateurs de score se trouvent 
en bas de I'ecran, avec un cadre 
semi-transparent en dessous. 




Les trois premiers indicateurs indiquent le nombre d'ordures que possede le joueur. Comme les 
joueurs ne peuvent avoir plus de dix ordures avant de se rendre a une benne, ils chercheront de 
preference a remplir la voiture avec un typed' ordure particulier. I Is souhaiteront en outre surveiller le 
moment ou leur voiture est presque pleine. 

Nouspasseronslestroischiffresen rougelorsquelavoituresera pleined'ordures. En outre, nousutiliserons 
un son pour I'indiquer. Un son de collecte s'entendra lorsque le joueur s'approchera suffisamment 
d'une ordure. Si la voiture est pleine, le joueur entend un autre son et I'ordre reste sur le sol. 

L es deux i ndi cateurs suivants presentent I e nombre d'ordures qui restent a trouver, le nombre d' ordures 
ramassees et le temps ecoule. La valeur de ici est le temps. Les joueurs trouveront tous les cent 
ordures a moins qu'ils ne se d ec ou rag ent trap tot. C'est done I e temps qui definira veritablement leur 
score. Le but du jeu sera de finir le plus vite possible. 

La definition de classe 

Le code de cejeu est plutot simple considerant tout ce que lejeu permet defaire. Lejeu commence 
en examinant le mondecreedans I'animation Flash et en verifiant a chaque image les changements et 
les mouvements du joueur. 

Le paquetage commence par importer un grand nombre de bibliotheques de classe. Nous aurons 
besoin de nos classes habituel les, ainsi que de flash. geom.* pour I'utilisation des objets Point et 

Rectangle et de flash. media. Sound et flash. media. SoundChannel pour les effets SOnores : 
package { 

import flash. display.*; 
import flash. events.*; 
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import flash. text.*; 

import flash.geom.*; 

import flash. utils.getTimer; 

import flash. media. Sound; 

import flash. media. SoundChannel; 

Le jeu requiert un certain nombre de constantes. speed et turnspeed controlent la reaction de la 
voitureaux touches flechees. carsize determi nele rectangle de contour del a voiture par rapport a son 
point central : 

public class TopDownDrive extends MovieClip { 
// Constantes 

static const speed:Number = .3; 
static const turnSpeed:Number = .2; 
static const carSize: Number = 50; 

La constante mapRect definit les I i mites de la carte. II s'agit approximativement de I 'emplacement de 
la cloture qui entoure le campus : 

static const mapRect: Rectangle = new Rectangle( -1150, -1150,2300,2300) ; 

La constante numTrasnObjects designe le nombre d' ordures creees au debut du jeu. maxcarry definit 
egalement le nombre d'ordures que le joueur peut avoir dans la voiture avant de devoir decharger sa 
cargaison dans unebenne : 

static const numTrashObjects:uint = 100; 
static const naxCarry:uint = 10; 

Les deux constantes suivantes definissent la distance pour les collisions avec les ordures et les bennes. 
II se peut que vous deviez ajuster ces valeurs si vous deplacez les bennes un peu a I'ecart des routes 
ou si vous modifiez la constante carsize : 

static const pickupDistance: Number = 30; 
static const dropDistance:Number = 40; 



II faut eviter de choisir une valeur trop grande pour pickupDistance car il est important que 
le joueur puisse faire glisser la voiture pres des ordures sans les recolter s'il s'efforce de ne 
ramasser que les ordures d'un certain type. 



Les variables peuvent etre reparties en trois groupes. Le premier est une serie de tableaux qui 
consignent les objets du jeu. 
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Le tableau blocks contiendra tous les objets Block qui empechent la voiture de quitter la route, 
trashobjects est une liste de toutes les ordures reparties aleatoirement dans la carte. Le tableau 
trashcans contient les trois bennes qui sont les points de depose pour les ordures : 

// Objets du jeu 
private var blocks :Array; 
private var trashObjects: Array; 
private var trashcans:Array; 

L' ensemble de variables suivant concerne I'etat du jeu. Nous commencerons par I ' habituel le serie de 
variables booleennes des touches flechees : 

// Variables de jeu 

private var arrowLeft, arrowRight, arrowUp, arrowDown: Boolean; 

Viennentensuitedeux valeursde temps. La premiere, lastTime, sera utilisee pour determiner la duree 
ecoulee depuis la derniere etape d'animation. La seconde, gamestartTime, sera utilisee pour 
determiner depuis combi en de temps la partiea commence : 

private var lastTime :int; 
private var ganeStartTime:int; 

Letableau onboard est une I isteavecun element pour chaquebenne, soittroisel ements. Ilscommenceront 
a 0 et contiendront le nombre de chaque type d'ordure que le joueur transporte dans la voiture : 

private var onboard:Array; 

La variable totaiTrashObjects contiendra la somme des trois nombres dans onboard. Nous 
I'utiliserons en reference rapide lorsqu'il s'agira de decider s'il y a assez de place pour d'autres 
ordures dans la voiture : 

private var totaiTrashObjects :int; 

score correspond simplement au nombre d'ordures collecte et depose dans les bennes : 

private var score :int; 

La variable lastobj ect est utilisee pour determiner le moment ou le son de charge pleine de la voiture 
doit etre emis. Lorsque le joueur a deja collecte dix ordures dans sa voiture, nous emettons un son 
d'alerte, a I'inversedu son positif quelejoueur obtient lorsqu'il restedela place pour les ordures. 

Comme I 'ordure n'est pas supprimeede la carte, il est fort probable que lejoueurentreimmediatement 
en collision avec el le une nouvelle fois et continue de le faire jusqu'a ce que la voiture s'ecarte 
suffisamment. 

Nous enregistrerons done une reference a I'objet Trash dans lastobject et la sauvegarderons pour 
nous y referer par la suite. N ous saurons ainsi que le son negatif a deja ete emis pour cet objet et qu'il 
n'est pas necessaire de le produire de nouveau tant que la voiture reste a proximite : 

private var last0bject:0bject; 
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Lesdernieresvariablessontdesreferencesauxquatresonsstockesdanslabibliothequederanimation. 
Tous ces sons ont ete definis avec des proprieties de liaison qui les mettent a disposition de notre code 
ActionScript sous forme de classes : 

// Sons 

var theHornSound:HornSound = new HornSound( ) ; 
var theGotOneSound:GotOneSound = new GotOneSound( ) ; 
var theFullSound:FullSound = new FullSound(); 
var theDumpSound:DumpSou nd = new DumpSound( ) ; 

La fonction constructeur 

Lorsque I'animation atteint I'image 2, el I e appelle startTopDownDrive pour commencer lejeu. 

Cette fonction appelle immediatement findBiocks et piaceTrash pour configurer la carte. Nous 
examinerons ces fonctions sous peu. 

public function StartTopDownDrive ( ) { 

// Recuperer les blocs 
findBiocks () ; 

// Placer les ordures 
placeTrash( ) ; 

Comme il n'y a que trois bennes et qu'elles ont ete specifiquement nominees dans le gamesprite, 
nous les placerons dans le tableau trashcans a I'aide d'une simple ligne de code. 

Le gamespnte est I'instance sur la scene de I'element de bi bl i otheque GameMap. Dans la 
bibliotheque, il s'agltenfaitd'unMovieciip.Commeil nefaitqu'uneimage, nous I'appellerons 

Cependant gamesprite. 

II Configuration des bennes 
trashcans = new Array(gamesprite.Trashcan1 , 

gamesprite. Trashcan2, gamesprite. Trashcan3) ; 

Comme les objets Trash sont crees par notre code et que la voiture se trouve dans le gamesprite avant 
que notre code s' execute, les ordures seront au-dessus de la voiture. Cela sera apparent une fois la 
voiture pleine et que lejoueur passe sur d'autres ordures. Si nous n'y faisions rien, vous verriez les 
ordures Hotter au-dessus de la voiture. En appelant setchiidindex avec gamesprite. numchiidren- 
1 , nous repl aeons en fait la voiture au-dessus de tous les autres elements du jeu : 

// S'assurer que la voiture est au-dessus 

gamesprite. setChildlndex (gamesprite. car, gamesprite. numChildren-1 ) ; 
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Nous aurions pu aussi creer un clip vide dans le clip Qameuap afin de conteni r toutes les 
ordures. Nous aurions pu alors le placer dans un caique de scenario juste sous la voiture, 
au-dessus de la route. Ce serait important si nous souhaitions que des elements, comme un 
pont, restent affiches aussi bien au-dessus de la voiture que des ordures. 



II nousfauttroisecouteurs, un pour I'evenement enter_frame, qui guidera lejeu entier, etdeux autres 
pour les appuis sur les touches : 

// Ajouter les ecouteurs 

this .addEventListener (Event .ENTER_FRAME,gameLoop) ; 

stage. addEventListener ( KeyboardEvent .KEY_DOWN, keyDownFunction) ; 

stage. addEvent Listener (KeyboardEvent .KEY_UP,keyUpFunction) ; 

Nous configurons ensuite I'etat du jeu. gamestarmme prend la valeur de temps actuelle. Le tableau 
onboard est rempli avec des zeros, tout comme totaiTrashObjects et score : 

// Configuration des variables du jeu 
gameStartTime = getTimer(); 
onboard = new Array(0,0,0) ; 
totaiTrashObjects = 0; 
score = 0; 

Pour faire avancer lejeu, nous allons immediatement appeler deux fonctions utilitaires. La fonction 
centerMap permet de positionner le gamesprite de maniere que la voiture se trouve au centre de 
I'ecran. Si nous ne I'appelions pas maintenant, nous verrions I'espace d'un instant le gamesprite tel 
qu'il apparait dans le scenario brut avant le premier evenement enter_frame. 

U n probleme du meme genre conduit a appeler ici showscore, afin que tous les indicateurs de score 
possedent leurs valeurs d'origine avant que le joueur ne puisse les voir : 

centerMap( ) ; 
showScore() ; 

Pour finir, nous emettons un son avec la fonction utilitaire piaysound. J ' ai inclus un son de klaxon 
simple pour signaler au joueur que lejeu a commence : 

playSound(theHornSound) ; 

} 

Trouver les blocs 

Pour trouver tous les objets Block dans le gamesprite, nous devons parcourir en boucle tous les 
enfants de gamesprite etvoirlesquelssontde type Block a I'aide del 'operateur is. Nousajouterons 
ceux qui le sont au tableau blocks. Nous positionnerons egalement la propriete visible de chacun 
des Blocks a false afin qu'ils ne s'affichent pas pour le joueur. Nous pourrons ainsi les voir 
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clairement lors du developpement de I'animation mais n'aurons pas a nous rappeler de les masquer 
ou de les rendre transparents avant de finir lejeu : 

// Trouver tous les objets Block 
public function findBlocks( ) { 
blocks = new Array ( ) ; 

for(var i=0;i<gamesprite.numChildren;i++) { 
var mc = gamesprite.getChildAt(i) ; 
if (mc is Block) { 

// Ajouter au tableau et rendre invisible 

blocks. push(nc) ; 

mc. visible = false; 

} 

} 

} 

Placer les ordures 

Pour placer aleatoirement cent ordures, nous devons boucler cent fois en placant un objet d'ordure a 
chaquefois : 

// Creer des objets Trash aleatoires 
public function placeTrash() { 

trashObjects = new Array(); 

for(var i:int=0;i<numTrashObjects;i++) { 

Pour chaque placement, nous commencons une seconde boucle. Ensuite, nous testons differentes 
valeurs pour les positions x et y de I'ordure : 

// Boucle infinie 
while (true) { 

// Emplacement aleatoire 

var x:Number = Math.floor(Math.random()*mapRect.width)+napRect.x; 
var y:Number = Math.floor(Math.random()*mapRect.height)+mapRect.y; 

Une fois que nous avonsun emplacement, nous leverifions par rapport aux Blocks. Si I'emplacement 
se trouve sur un Block, nous le notons en donnant a la variable locale isOnBiock la valeur true : 

// Verifier tous les blocs pour voir si chevauchement 
var isOnBiock: Boolean = false; 
for(var j :int=0;j<blocks.length;j++) { 

if (blocks[j] .hitTestPoint(x+gamesprite.x,y+gamesprite.y) ) { 

isOnBiock = true; 

break; 

} 

} 
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Si I' emplacement n'entre en intersection avec aucun Block, nous poursuivons et creons le nouvel 
objet TrashObject. Ensuite, nous definissons son emplacement. Nous avons egalement besoin de 
choisir un type aleatoire pour cet element, en conduisant le clip a I'image 1, 2 ou 3. La Figure 12.8 
presente le debut d'un jeu ou troi s clips TrashObj ect ont ete places a proximite du point de depart de 
la voiture. 



Le clip TrashObject contient trois images avec un graphisme different dans chacune. Ces gra- 
phismes sonten fait eux-memes des clips. II n'estpas necessaire qu'il s'agissede clips sepa res 
pour lesutiliser dans TrashObject, mais nous souhaitons pouvoir utiliser les memesgraphismes 
pour les bennes afin d'indiquer a quel type d'ordure chacune correspond. En procedant ainsi, 
nous n'avons qu'une version de chaque image dans la bibliotheque. 



Nous ajoutons cet objet d'ordure a trashobjects et quittons la boucle. 
Figure 12.8 

Trois clips TrashObject ont 
ete places aleatoirement pres 
de la voiture au debut du jeu. 
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Cette instruction break finale nous fait sortir de la boucle while et passer au placement de I'ordure 
suivante. Si isOnBiock vauttrue, nous poursuivons cependant avec la boucle while en choisissant un 
autre emplacement a tester : 

// Pas d' intersection, utiliser cet emplacement 
if (lisOnBlock) { 

var newObj ect: TrashObject = new TrashObj ect ( ) ; 

newObject.x = x; 

newObject.y = y; 
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newObject .gotoAndStop( Math, floor (Math, random ( ) *3)+1 ) 
gamesprite.addChild(newObject) ; 
trashObjects.pushfnewObject) ; 
break; 



Lorsque voustestez une fonction de placement comme piacerrash, il est utile de la tester avec 
un nombre d'objets tres eleve. Par exemple, j'ai teste piacerrash en ayant attribue la valeur 
10 000 a numTrashObjects. Des tonnes d'ordures se trouvaient ainsi deversees sur la route, 
mais j'ai pu clairement voir qu'elles ne I'etaient que sur la route et non dans les emplace- 
ments ou je ne les voulais pas. 



Entree clavier 

Le jeu inclut un ensemble de fonctions d' entree clavier analogues a eel les que nous avons uti Usees 
dans plusieursjeux precedents. Quatrevaleurs booleennessont definies en fonction del'appui sur les 
quatre touches flechees du clavier. 

Les fonctions reconnaissent meme la toucheflecheedu bas bien que cette version du jeu ne I 'utilise 
pas : 

// Consigner les appuis sur les touches, definir les proprietes 
public function keyDownFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

arrowLeft = true; 
} else if (event. keyCode == 39) { 

arrowRight = true; 
} else if (event. keyCode == 38) { 

arrowUp = true; 
} else if (event. keyCode == 40) { 

arrowDown = true; 

} 

} 

public function keyUpFunction(event:KeyboardEvent) { 
if (event. keyCode == 37) { 

arrowLeft = false; 
} else if (event. keyCode == 39) { 
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arrow/Right = false; 
} else if (event. keyCode == 38) { 

arrowUp = false; 
} else if (event. keyCode == 40) { 

arrow/Down = false; 

} 

} 

La boucle du jeu 

La fonction gameLoop gerera le mouvement de la voiture. II n'y a en fait pas d'autre objet qui se 
deplace dans le jeu. Le joueur deplace la voiture et tout le reste est statique dans le gamesprite. 

II s'agit d'une animation temporelle; nous al Ions done calculer le temps ecoule depuis la derniere 
image et deplacer les elements en fonction de cette valeur : 

public function gameLoop(event:Event) { 

// Calculer le temps ecoule 
if (lastTine == 0) lastTime = getTimer(); 
var tineDiff:int = getTiner( ) -lastTime; 
lastTine += timeDiff; 

Nous verifierons les touches flechees de gauche et de droite et appellerons rotatecar pour gerer 
I'orientation de la voiture. Nous passerons timeDiff et le sens du tournant : 

// Rotation a gauche ou a droite 
if (arrowLeft) { 

rotateCar(timeDiff , "left" ) ; 

} 

if (arrow/Right) { 

rotateCar (timeDiff, " right" ) ; 

} 

Si la touche flechee du hautestenfoncee, nousappelonsmovecar en passant timeDiff. Ensuite, nous 
appelons centeriuiap pour nous assurer que le gamesprite est correctement positionne d'apres le 
nouvel emplacement de la voiture. 

La fonction checkcoiiisions verifie si lejoueur a collecte des ordures ou s'est approche d'une benne : 

// Deplacer la voiture 
if (arrowUp) { 

noveCar(timeDiff ) ; 

centerMap() ; 

checkCollisions( ) ; 

} 
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Rappelez-vous que le temps est en fait le veritable score de ce jeu. Lejoueur joue contre la montre. 
Nous devons done mettrea jour le temps ecouleafin que lejoueur puisseevaluer sa reussite : 

// Mettre a jour le temps et verifier si le jeu est termine 
showTime( ) ; 

} 

Examinons tout de suite la fonction centerMap, parce qu' el le est particul ierement simple. Elle doit 
juste definir I 'emplacement du gamesprite en lui attribuant les versions negatives de I'emplacement 
de la voiture a I'interieur du gamesprite. Par exemple, si la voiture se trouve a I'emplacement 
1000 ,600 dans gamesprite, lefaitde positionner le gamesprite a -1000, -600 implique que la voiture 
se trouvera a I'emplacement 0,0 dans la scene. 

Nous ne souhaitons pas que la voiture soit precisement a 0,0, car cela correspond au coin superieur 
gauche de la scene. Nous souhaitons la centrer dans la scene. Pour cela, nousajoutons done 275,200. 



Si vous souhaitez modifier la taille de la zone visible de la scene, par exemple pour passer a 
640 x 480, il est necessaire de changer egalement les valeurs a cet endroit pour les faire 
correspondre au milieu de la scene. U ne scene de 640 x 480 necessiterait les valeurs 320 et 
240 pour les ajustements x et y afin de positionner la voiture au milieu de I'ecran. 

public function centerMap() { 

gamesprite. x = -gamesprite. car. x + 275; 
gamesprite. y = -gamesprite. car. y + 200; 

} 

Mouvement de la voiture 

Le guidage de la voiture est assez peu real iste dans ce jeu : la voiture pivote autour de son centre de 
quelques degres a chaque image. En fait, la voiture peut meme tourner sans avancer. Essayez done 
avec votre propre voiture... 

Si vous jouez a ce jeu, vous remarquerez cependant a peine cette incongruite. La rotation est 
temporelle ; elle est done le produit de timeDiff etdela constante turnspeed. La voiture doit tourner 
a la meme cadence quelle que soit la cadence d'images de I'animation : 

public function rotateCar(tineDiff :Number, direction:String) { 
if (direction == "left") { 

gamesprite. car. rotation -= turnSpeed*timeDiff ; 
} else if (direction == "right") { 

gamesprite. car. rotation += turnSpeed*timeDiff ; 

} 

} 
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II estaussi assez simple defaireavancer la voitureou, du moins, cela le serait s'il ne fal lait detecter 
et gerer les collisions avec les Blocks et les limites de la carte. Nous simplifierons la detection des 
collisions en utilisant des objets Rectangle simples et la fonction intersects. La premiere chose 
dont nous ayons besoin est done le Rectangle de la voiture. 

La voiture est deja de forme rectangulaire mais, comme el I e pivote, il est problematique d'utiliser le 
Rectangle exact du clip. A u lieu decela, nous allons utiliser un Rectangle recreequi utilise I e centre 
de la voiture et carsize. Cette zone carree offrira une approximation suffisante de la zone de la 
voiture pour que lejoueur ne s'en rende pas compte. 



-.. Pour preserver I ' i 1 1 usi on que les collisions sont precises, il est important de veiller a ce que 
le graphisme de la voiture soit relativement carre, autrement dit aussi long que large. U ne 
voiture bien plus longue que large necessiterait que Ton fasse dependre la distance de colli- 
sion de la rotation de la voiture par rapport aux bords avec lesquels el I e pourrait entrer en 
collision. Ce cas de figure serait deja bien plus complexe. 



// Faire avancer la voiture 

public function moveCar(timeDiff :Number) { 

// Calculer la zone actuelle de la voiture 

var carRect = new Rectangle(gamesprite.car.x-carSize/2, 
ganesprite.car.y-carSize/2, carSize, carSize); 

Nous avons maintenant I' emplacement actuel de la voiture dans carRect. Pour calculer le nouvel 
emplacement de la voiture, nous convertissons la rotation de la voiture en radians, fournissons ces 
nombres a Math. cos et Math. sin, puis multiplions ces valeurs par la vitesse et timeDiff. Nous 
obtenons ainsi un mouvement temporel en utilisant la constante speed. newCarRect contient ensuite 
le nouvel emplacement de la voiture : 

// Calculer la nouvelle zone de la voiture 
var newCarRect = carRect. clone () ; 

var carAngle:Number = (gamesprite. car. rotation/360) *(2.0*Math. PI) ; 
var dx:Number = Math.cos(carAngle) ; 
var dy:Number = Math.sin(carAngle) ; 
newCarRect. x += dx*speed*timeDiff ; 
newCarRect. y += dy*speed*timeDiff ; 

Nous avons egalement besoin des emplacements x et y correspondant au nouveau Rectangle. Nous 
ajouterons les memes valeurs a x et a y pour obtenir ce nouvel emplacement : 

// Calculer le nouvel emplacement 

var newX:Number = gamesprite. car. x + dx*speed*timeDiff ; 
var newY:Number = gamesprite. car. y + dy*speed*timeDiff ; 
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II est maintenant temps de parcourir en boucle les blocs et devoir si le nouvel emplacement entre en 
intersection avec I'un d ' entre eux : 

// Parcourir en boucle les blocs et verifier les collisions 
for(var i:int=0;i<blocks.length;i++) { 

// Recuperer le rectangle du bloc, voir s'il y a collision 
var blockRect: Rectangle = blocks[i] .getRect(gamesprite) ; 
if (blockRect. intersects(newCarRect) ) { 

En cas de collision, nousexaminons separement les donnees horizontaleset vertical es de la collision. 

Si la voiture a passe le cote gauche d'un Block, nous la ramenons au bord de ce Block. Le meme 
pri ncipe est utilise pour le cote droit du Block. Nous n'avons pas a nous soucierd'ajusterle Rectangle, 
mais uniquement les valeurs de position newx et newY. Ce sont el les qui seront uti I i sees pour definir le 
nouvel emplacement de la voiture : 

// Repousser horizontalement la voiture 
if (carRect. right <= blockRect. left) { 

newX += blockRect. left - newCarRect. right; 
} else if (carRect . left >= blockRect. right) { 

newX += blockRect. right - newCarRect. left; 

} 

Voici maintenant le code qui gere les cotes superieur et inferieur du Block heurte : 

// Repousser verticalement la voiture 
if (carRect. top >= blockRect. bottom) { 

newY += blockRect. bottom -newCarRect. top; 
} else if (carRect. bottom <= blockRect. top) { 

newY += blockRect. top - newCarRect. bottom; 

} 

} 

} 

U ne fois que tous les blocs ont ete examines afin de determiner les eventuelles collisions, nous devons 
examiner les limites de la carte. C'est I' oppose des blocs, car nous souhaitons conserver la voiture a 
I'interieur du Rectangle des limites et non en dehors. 

Nous examinerons done chacun des quatre cotes et repousserons les valeurs newx ou newY afin 
d'empecher la voiture de quitter les limites de la carte : 

// Verifier les collisions avec les bords 

if ((newCarRect. right > mapRect . right) && (carRect. right <= mapRect . right) ) { 
newX += mapRect. right - newCarRect . right ; 
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} 

if ( (newCarRect.left < mapRect . left) && (carRect.left >= mapRect.left) ) { 
newX += mapRect.left - newCarRect.left; 

} 

if ( (newCarRect.top < mapRect.top) && (carRect.top >= mapRect.top) ) { 
newY += mapRect.top -newCarRect.top; 

} 

if ( (newCarRect. bottom > mapRect. bottom) && (carRect. bottom <= mapRect. bottom) ) { 
newY += mapRect. bottom - newCarRect. bottom; 

} 

M aintenant que la voiture est securisee dans les limites de la carte et rejetee hors de tout Block, nous 
pouvons definir le nouvel emplacement de la voiture : 

// Definir le nouvel emplacement de la voiture 
gamesprite.car.x = newX; 
gamesprite.car.y = newY; 

} 

Verifier les collisions avec les ordures et les bennes 

La fonction checkcoiiisions doit rechercher deux types de collisions differents. Elle commence par 
examiner tous les trasnobjects. Elle utilise la fonction Point .distance pour voir si I 'emplacement 
de la voiture et celui du Trasnobject sont plus rapproches que la constante pickupDistance : 

public function checkCollisions( ) { 

// Parcourir les bennes en boucle 

for(var i: int=trash0bjects.length-1 ;i>=0;i- - ) { 

// Voir si proximite suffisante pour recuperer les ordures 

if (Point. distance(new Point(gamesprite. car. x, gamesprite.car.y) , 

new Point(trashObjects[i] .x, trashObjects[i] .y) ) < pickupDistance) { 

Si un el ement est suffisamment proche, nous comparons totaiTrashOb j ects a I a constante maxcarry. 
S'il reste de la place, I'ordure est ramassee en positionnant Tempi acement approprie dans onboard 

d'apres currentFrame-1 du dip TrashObject. Ensuite, I'ordure est SUpprimee de gamesprite et du 

tableau trasnobjects. Nous devons mettre a jour le score et lire GotoneSound : 

// Voir s'il y a de la place 
if (totalTrashObjects < maxCarry) { 
// Recuperer I'ordure 
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onboard[trashObjects[i] .currentFrame-1 ]++; 
gamesprite.removeChild(trashObjects[i] ) ; 
trashObjects. splice (i, 1 ) ; 
showScore() ; 

playSound(theGotOneSound) ; 

L'un des aspects de notre code susceptible de porter a confusion tient a la maniere dont 
les types d'ordures sont references. Comme images dans le clip Trasnobject, ils corres- 
pondent aux images 1, 2 et 3. En revanche, les tableaux sont indices a 0, aussi, dans le 
tableau onboard, nous stockons les types d'ordures 1, 2 et 3 dans les emplacements de 
Tableau 0, 1 et 2. Les bennes seront nommees rrashcam, Trasncan2 et Trasncan3 et cor- 
respond ront aux numeros des images, ma is pas aux emplacements de tableau. Pour autant 
que vous gardiez ce point a I 'esprit, vous ne devriez pas avoir de pro bl erne pour modifier 
le code. Le fait que les tableaux soient indices a 0 et que les images commencent a 1 
souleve des problemes constants pour les developpeurs ActionScript. 

A I'inverse, si le joueur entre en collision avec une ordure mais qu'il n'y ait plus de place, nous 
emettonsun autre son. Nousnelefaisonsjouerquesi I' element ne correspond pas a lastobject (le 
dernier objet). Cette verification evite que le son ne se joue de maniere repetitive le temps que le 
joueur s'ecarte de I'objet. Le son n'est ainsi joue qu'une seule fois par objet : 

} else if (trashObjects[i] != lastObject) { 
playSound(theFullSound) ; 
lastObject = trashObjects[i] ; 

} 

} 

} 

L' ensembl esuivantde col I isions examine I estrois bennes. Nousutiliseronsici aussi Point, distance. 
A pres qu'une collision aura ete detectee, nous suppri merons toutes I es ordures de ce ty pe du tabl eau 
onboard. N ous mettrons a jour le score et emettrons un son signalant que les ordures sont deposees : 

// Deposer les ordures si proches d'une benne 
f or (i=0;i<trashcans. length; i++) { 

// Voir si la voiture est suffisamment proche 
if (Point. distance(new Point(gamesprite.car.x,gamesprite.car.y) , 
new Point(trashcans[i] .x, trashcans[i] .y) ) < dropDistance) { 




// Voir si le joueur a des ordures de ce type 
if (onboard[i] > 0) { 
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// Deposer 

score += onboard[i] ; 
onboard[i] = 0; 
showScore ( ) ; 

playSound(theDumpSound) ; 

Si le score s'est eleve au point d'atteindre la valeur de la constante numTrashObjects, nous en 
concluons que la derniere ordure a ete deposee et la parti e est terminee : 

// Voir si toutes les ordures ont ete deposees 
if (score >= numTrashObjects) { 

endGame() ; 

break; 

} 

} 

} 

} 

} 

Le chronometre 

La mise a jour du chronometre est assez simple et analogue a ce que nous avons fait dans le jeu de 
M emory du C hapitre 3. N ous soustrayons le temps courant du temps de depart pour obtenir le nombre 
de millisecondes ecoulees depuis le debut du jeu. Ensuite, nous utilisons la fonction utilitaire 
ciockTime pour convertir cette valeur en un format d'horloge : 

// Mettre a jour le temps affiche 
public function showTime() { 

var gameTime:int = getTimer() -gameStartTime; 

timeDisplay.text = clockTime(gameTime) ; 

} 

La fonction ciockTime calculele nombre desecondesetde minutes, puis formate cesvaleursavec des 
zeros d'en-tete si besoin : 

// Conversion au format d'horloge 

public function clockTime(ms:int) :String { 

var seconds:int = Math.floor(ms/1000) ; 

var minutes:int = Math.floor(seconds/60) ; 

seconds -= minutes*60; 

var timeString:String = minutest" : "+String(seconds+100) .substr(1 ,2) ; 
return timeString; 

} 
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Les indicateurs de score 

Dans ce jeu, I'affichage du score est complexe et ne se limite pas a afficher un simple nombre. Nous 
al Ions afficher les trois nombres stockes dans onboard. Dans le meme temps, nous additionnerons ces 
nombres pour obtenir la valeur totaiTrashObjects, qui sera utilisee autre part dans le jeu afin de 
determi ner s' i I reste de I a pi ace dans I a voi ture : 

// Mettre a jour les elements texte du score 
public function showScore() { 

// Definir chaque nombre d'ordure, additionner le tout 
totaiTrashObjects = 0; 
for(var i:int=0;i<3;i++) { 

this[ "onboard"+(i+1 ) ] .text = String(onboard[i] ) ; 

totaiTrashObjects += onboard[i]; 

} 

Nous utiliserons egalement totaiTrashObjects des maintenant pour colorer les trois nombres en 
rouge ou en blanc selon que la voi ture est pleineou non. Ceformatageoffrira un indicateur naturel au 
joueur afin de lui indiquer qu'il a atteint la capacite maximale de la voiture et doit se rendre a une 
benne : 

// Definir la couleur des trois en fonction de la limite atteinte 
for(i=0;i<3;i++) { 

if (totaiTrashObjects >= 10) { 

this[ "onboard"+(i+1 ) ] .textColor = 0XFF0000; 

} else { 

this[ "onboard"+(i+1 )] .textColor = 0XFFFFFF; 

} 

} 

Ensuite, nous affichons a la fois le score et le nombre d'ordures restant a ramasser : 

// Definir le nombre restant et le score 
numLef t .text = String (trashObjects. length) ; 
scoreDisplay.text = String(score) ; 

} 

Fin du jeu 

Lorsque la partie est terminee, nous supprimons les ecouteurs mais pas le gamesprite, car nous ne 
I'avons pas cree. Celui-ci disparait simplement lorsque nous utilisons gotoAndstop pour nous rendre 
a I 'image suivante. 
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Comme le gamesprite ne se trouve que dans I' image play, il n'est pas affiche dans I' image gameover : 

// Fin de la partie, supprimer les ecouteurs 
public function endGame() { 

blocks = null; 

trashObjects = null; 

trashcans = null; 

this. removeEventListener(Event . ENTER_FRAME,gameLoop) ; 
stage . removeEventListener (KeyboardEvent . KEY_D0WN, keyDownFunction) ; 
stage. removeEvent Listener (KeyboardEvent .KEY_UP, keyUpFunction) ; 
gotoAndStop( "gameover" ) ; 

} 

L orsque I' image gameover a eteatteinte, nousappelons snowFinaiwiessage. Nousnepouvonsl'appeler 
avant car le champ texte finaiwiessage ne se trouve que dans I'image gameover et n'est accessible 
qu'une fois que cette image est visible. 

N ous placerons le temps final dans ce champ texte : 

// Afficher le temps dans l'ecran final 
public function showFinalMessage( ) { 
showTime( ) ; 

var finalDisplay:String = ""; 

finalDisplay += "Time: "+timeDisplay.text+"\n" ; 

finalMessage.text = finalDisplay; 

} 

II nous manque une derniere fonction : la fonction utilitaire piaySound. Celle-ci sert simplement 
d'emplacement central pour tous les effets sons a declencher : 

public function playSound(soundObject: Object) { 
var channel:SoundChannel = soundObject .play( ) ; 

} 




L'un des avantages lies au fait d'utiliser une meme fonction partout oil les effets son sont 
inities tient a ce que vous pouvez rapidement et aisement creer des fonctions de sourdine et 
de volume. Si vous eparpillez votre code de son dans tout lejeu, vousserez contra intde modi- 
fier chacun de ces emplacements pour ajouter un systeme de sourdine ou de reglage du 
volume. 
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Modifier le jeu 

Cejeu peut etre modifie pour correspond re a presque n'importequel typedejeu d'exploration ou de 
collecte d'objets. Vous pouvez modifier les elements d'arriere-plan sans aucune programmation 
particul iere. Les zones de collision (les Blocks) peuvent etre modifies en deplacant et en ajoutant 
simplement de nouveaux clips Block. 

Vous pouvez meme faire durer le jeu plus longtemps en faisant apparaitre de nouvelles ordures a 
mesure que le temps passe. Vous pouvez par exemple configurer un Timer de facon qu'une nouvelle 
ordure soit ajoutee toutes les cinq secondes. Le Timer pourrait proceder de cette maniere pendant 
quelques minutes avant de s'interromprefinalement. 

Vous pourriez egalement aj outer des obstacles a eviter, comme des taches d'huileou des mines. Une 
version militairede cejeu pourrait ainsi mettreen scene un vehicule militaire charge de recuperer des 
soldats sur un champ de batai I le tout en evitant les mines qui jonchent le sol. 



Creer un jeu de course 

En jouant a notrejeu en vue aerienne, vous serez peut- etre tente de vous amuser a faire la course de 
voiture. Vous pourriez ainsi essayer devoir le temps qu'il vousfaut pour faire letour du campus. 

Si la precedente version du jeu constitue un bon depart, il convient tout de meme d'ajouter quelques 
elements supplemental res pour creer un jeu de course. 

Codes sources 

(HP^r http://flashgameu.com 

A3GPU12 RacingGame-zip 



Elements du jeu de course 

Bien que nous creions un jeu de course "d'arcade" et non un veritable jeu de simulation, il convient 
de rendre la conduite suffisamment real iste pour donner I' impression que Ton pi I ote une vraie voiture. 
II nefautdonc pas que la voiture se retrouve lancee a pleine vitesse des la premiere seconde ou Ton 
appuiesur la touche ni qu'elle s'arrete des I'instant ou on la relache. 

Nous allons done ajouter des effets d'acceleration et de deceleration a cejeu. La touche flechee du 
haut contribuera a accelerer la vitesse de la voiture et la vitesse de la voiture sera uti I i see pour 
determiner le mouvement a chaque image. 
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La distinction entre un jeu d'arcade et un jeu de simulation est plus importante ici que dans 
aucun desjeux que nousavons considered precedemment. U ne veritable simulation doittenir 
compte de la realite physique des elements, comme la masse de la voiture, le couple moteur 
du vehicule et la friction entre les pneus et la route, sans mentionner encore les derapages. 
Ces points de detail depassentnon seulement le cadre d'un jeu simple cree sous F lash maissont 
general ement si mplifiesou ignores dans bien desjeux de console couteux. II est important de ne 
pas laisser le real isme empieter sur le plaisir du jeu ni de venir entraver le bon deroulement du 
developpement du jeu en abandonnant sa realisation faute de budget et de temps. 



Delamememaniere, si latoucheflecheedu bas est enf oncee, une acceleration inverse s'opere. En position 
d'arret, latoucheflecheedu bas produira done une valeur devitesse negative etf era reculer la voiture. 

L'un des autres aspects du jeu de course tient a ce que la voiture doit suivre un trace specifique. Le 
joueur ne doit pas pouvoir couper la piste en operant un raccourci ni faire machine arriere pour 
retraverser la ligne d'arrivee en quelques secondes. 

Pour surveiller le cheminement du joueur, nous utiliserons une technique simple dite des points de 
parcours. Le joueur doit alors se rapprocher d'une serie d' emplacements autour de la piste et recolter 
les points associes. Seul le joueur qui a atteint tous ces points est autorise a passer la ligne d'arrivee. 

Le plus interessant concernant les points de parcours tient a ce que le joueur nesait meme pas ou ils 
se trouvent. Nous masquerons ces points et comptabiliserons le score du parcours sans en informer le 
joueur. Ce dernier ne saura en definitive qu'une chose : qu'il doit courir vite et honnetement. 

Une autre fonctionnalite de ce jeu contribuera a le rendre plus palpitant : le compte a rebours de 
depart. A u lieu de faire commencerlejeu directement, nous bloquerons le joueur pendant 3 secondes 
en affichant 3, puis 2 puis 1 avant I e top depart. 

Creer la piste 

La detection de collision dans le jeu en vue aerienne utilisait des blocs rectangul aires. II est assez 
facile de detecter des collisions par rapport a des bords horizontaux ou verticaux droits. 

L es pistes de courses presentent en revanche des courbes, et la detection des col lisions avec des courbes, 
voire simplement avec de courts segments de murs en diagonale, se revele bien plus difficile. 

Nous eluderons done ce probleme dans ce jeu. 

La piste sera constitute detroiszones : la route, les borduresettoutlereste. Si la voiture setrouve sur 
la route, elle se deplace sans contrainte. Si el I e setrouve sur la borduredela route, el I e continue dese 
deplacer, mais avec une enquiquinante deceleration constante qui fera perdre du temps au joueur. 
Si la voiture se trouve en dehors de la route et de sa bordure, la deceleration deviendra drastique et 
la voiture devra tourner et boitiller jusqu'a la route. 

La Figure 12.9 presente ces trois zones. La route se trouve au milieu et apparait en gris dans Flash. 
Juste a I'exterieur se trouve sa bordure representee en marron dans Flash etd'un ton de gris different 
dans la figure. 
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Figure 12.9 

La piste est entouree 
d'une bordure epaisse. 




La piste inclut egalement des elements inactifs comme les arbres eparpi I les autour. 



Si les arbres ne sont pas references dans notre code et ne sont meme pas des clips mais sim- 
plementdes symboles graphiques, ilsjouent neanmoins un role important. Sans ces elements 
incidents, il serait difficile pour le joueur de remarquer le mouvement de la voiture et d'eva- 
luer sa vitesse. 



Leclip car est place sur la piste a la position ou la voiture doit demarrer, soit exactement sur la ligne 
d'arrivee, qui correspond a un clip separe. 

L es poi nts qui apparaissent autour de la piste sont les poi nts de parcours. Vous pouvez n'en placer que 
quelques-uns autour de la piste, comme nous I'avons fait, ou bien plus si cette piste inclut plus de 
tournants et de chicanes et que vous deviez a/ iter que le joueur triche en coupant les virages. 

Tous ces elements se trouvent dans le clip Track, qui est le gamesprite auquel notre code fait 
reference. 
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Effets sonores 

Ce jeu utilisera plusieurs effets sonores. Trois differents sons de conduite seront lus en boucle pendant 
que lejoueur fait avancer la voiture. Voici une liste des sons utilises dans lejeu : 

• Drivesound. Un son en boucle emis pendant que la voiture accelere et se trouve sur la route. 
Analogueau son d'un moteurde voiture de sport. 

• Sidesound. U n son en boucle emis pendant que la voiture accelere et se trouve sur la bordure de 
la route. Analogueau son de pneus qui patinentdans la boue. 

• of f roadsound. U n son en boucle emis pendant que la voiture accelere et se trouve hors de la route 
etdesa bordure. Analogueau son d'une voiture qui roule sur des gravillons. 

• BrakestopSound. U n son de freins crissant a utiliser lorsque la voiture passe la ligne d'arrivee. 

• Readysetsound. U n bip aigu emis durant le compte a rebours au debut du jeu. 

• GoSound. Un bip grave emis lorsque le compte a rebours atteint zero. 

Lejeu pourrait facilement inclure d'autres sons, comme un son dormant lorsque la voiture n' accelere 
pas. BrakestopSound pourrait en outre etre remplace parunefoulequi acclame lejoueur a la fin dela 
course. 

Constantes et variables 

Certaines parties du codedecejeu sont identiques a eel I es du jeu de conduite en vueaerienne. Nous 
nous occuperons ici avant tout du code qui change. 

Lesconstantesincluentmaintenantdesconstantesd'accelerationetdedeceleration.Ellescorrespondent 
a des nombres particulierement petits parce qu'elles seront multiplies par les millisecondes qui 
s'ecoulent entreles images : 

public class Racing extends MovieClip { 
// Constantes 

static const maxSpeed: Number = .3; 
static const accel: Number = .0002; 
static const decel:Number = .0003; 
static const turnSpeed: Number = .18; 

Parmi lesvariablesdujeufiguregameMode, qui indiquerasi la course a demarre. Nous auronsegalement 
un tableau waypoints pour contenir les emplacements Point des clips waypoint. La variable speed 
contiendra la cadence actuelle a laquelle la piste se deplace, qui changera a mesure que la voiture 
accelere etdecel ere: 

// Variables de jeu 

private var arrowLeft, arrowRight, arrowUp, arrowDown: Boolean; 
private var lastTime:int; 
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private var gameStartTime:int; 
private var speed:Number; 
private var gameMode:String; 
private var waypoints : Array; 
private var currentSound:Object; 

Voici les definitions initiales pour tous les nouveaux sons. Chacun se trouve dans la bibliotheque et a 
ete configure de maniere a etre exporte pour ActionScript : 

// Sons 

static const theBrakestopSound:BrakestopSound = new BrakestopSound( ) ; 

static const theDriveSound:DriveSound = new DriveSound() ; 

static const theGoSound:GoSound = new GoSound(); 

static const theOff roadSound :0f f roadSound = new Off roadSound( ) ; 

static const theReadysetSound:ReadysetSound = new ReadysetSound( ) ; 

static const theSideSound:SideSound = new SideSound(); 

private var driveSoundChannel:SoundChannel; 

Demarrer le jeu 

Lorsque ce jeu demarre, il n'a pas besoin de rechercher des Blocks. II doit au lieu de cela trouver les 
points de parcours (waypoints). Lafonction findwaypoints s'en charge. Nousy viendrons juste apres : 

public function startRacing() { 

// Obtenir la liste des points de parcours 
findwaypoints () ; 

Les ecouteurs requis sont les memes que pour le jeu de conduite en vue aerienne, mais parmi les 
variables qui doivent etre definies au debut du jeu figurent maintenant gamewiode et speed. Nous 
definirons egalement le champ texte timeDispiay en lui attri buant une chaine vide parce qu'il sera 
vide pendant les 3 premieres secondes du jeu, jusqu'a ce que la course demarre : 

// Ajouter les ecouteurs 

this. addEvent Listener! Event .ENTER_FRAME,gameLoop) ; 

stage. addEventListener ( KeyboardEvent .KEY_D0WN, keyDownFunction) ; 

stage. addEventListener(KeyboardEvent.KEY_UP,keyUpFunction) ; 

// Configurer les variables du jeu 
speed = 0; 
gameMode = "wait" ; 
timeDispiay. text = " " ; 
gameStartTime = getTiner( )+3000; 
centerMapf) ; 

} 
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Vous remarquerez que gamestartTime sevoitajoutertrois secondes. En effet, lejeu demarreavec un 
compte a rebours de 3 secondes. L a voiture ne sera pas autori see a se depl acer avant que ces 3 secondes 

se SOient ecoulees et que gameTimer ( ) ait rattrape gamestartTime. 

La fonction findwaypoints esttres prochede lafonction findBiocks du precedent jeu. Cettefois, nous 
nesouhaitonscependantconnaitrequel'emplacementdu Point dechaque point deparcours. Unefois 
que nous avons enregistrecette information, I e clip n'importe plus : 

// Examiner tous les enfants de gamesprite et memoriser les points de parcours 
public function findWaypoints( ) { 
waypoints = new Array(); 
for(var i=0;i<gamesprite.numChildren;i++) { 
var mc = gamesprite. getChildAt(i) ; 
if (mc is Waypoint) { 

// Ajouter au tableau et rendre invisible 
waypoints. push(new Point(mc.x, nc.y)); 
mc. visible = false; 

} 

} 

} 

La boucle principale du jeu 

Nouspasserons les fonctionsd'ecouteur clavier parce qu' el I es sont i denti ques a cellesdu jeu precedent. 
La fonction gameLoop est en revanche un peu differente. Nous y inclurons directement un grand 
nombredes mecanismesdu jeu au lieu de les deleguer a d'autres fonctions. 

Apres avoir determine le temps qui s'est ecoule depuis la derniere execution de gameLoop, nous 
examinerons les touches flechees de gauche et de droite ettournerons la voiture : 

public function gameLoop(event:Event) { 

// Calculer le temps ecoule 
if (lastTime == 0) lastTime = getTimer(); 
var timeDiff:int = getTimer( ) -lastTime; 
lastTime += timeDiff; 

// Ne deplacer la voiture qu'en node Course 
if (gameMode == "race") { 

// Pivoter a gauche ou a droite 

if (arrowLeft) { 

gamesprite. car. rotation -= (speed+.1 )*turnSpeed*timeDiff ; 

} 

if (arrowRight) { 

gamesprite. car. rotation += (speed+.1 )*turnSpeed*timeDiff ; 

} 
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Troisfacteursaffectent la valeurde rotation : la vitesse (speed), la constanteturnspeed (braquage) et 
timeDiff. speed est en outre augmentee de . 1. Ce reglage permet au joueur de tourner la voiture 
legerement lorsqu'il se trouve a I' arret et legerement plus lorsqu'il se deplace lentement. Si cela ne 
correspond pasprecisementa une simulation de conduite, cela rend neanmoinslejeu moinsfrustrant. 



En liant la vitesse au braquage, nous permettons a la voiture de tourner plus vite lorsqu'elle 
se deplace plus vite. Cela rend la conduite plus realiste et permet de mieux gerer les courbes 
du circuit. 



En outre, vous noterez que la rotation et le mouvement qui suit nese produisent que si gameMode vaut 
"race". Cela ne se produit qu'unefois lecomptea rebours de3 secondes ecoule. 

Le mouvement de la voiture depend desa vitesse. La vitesse depend de I'acceleration, qui se produit 
lorsque le joueur appuie sur les touches flechees du haut et du bas. Le code qui suit se charge de ces 
changements et s'assure que la vitesse ne s'emballe pas en la restreignant a maxspeed : 

// Faire accelerer la voiture 
if (arrowUp) { 

speed += accel*timeDiff ; 

if (speed > maxSpeed) speed = maxSpeed; 
} else if (arrowDown) { 

speed -= accel*timeDiff ; 

if (speed < -maxSpeed) speed = -maxSpeed; 

Si ni latoucheflecheedu hautni celledu basnesontenfoncees, lavoituredoits'arreterprogressivement. 
Nous utiliserons la constante decel pour reduire la vitesse de la voiture : 

// Aucune touche enfoncee, ralentir 
} else if (speed > 0) { 

speed -= decel*timeDiff ; 

if (speed < 0) speed = 0; 
} else if (speed < 0) { 

speed += decel*timeDiff ; 

if (speed > 0) speed = 0; 

} 




Vous pourriez aisement ajouter des freins a la voiture. Pour cela, incluez la barre d'espace 
en plus des quatre touches flechees lorsque vous surveillez le clavier. Lors de I'appui sur la 
barre d'espace, vous pouvez provoquer un ralentissement plus important que la constante 

decel. 
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Nous n'avons a verifier le mouvement de la voiture que s'il y a une valeur speed. Si la voiture est 
complement a I' arret, nous pouvonsignorerce qui suit. 

Si la voiture se deplace, nous devons en revanche la repositionner, verifier si ellese trouveou non sur 
la route, recentrer la carte par rapport a la voiture, verifier si de nouveaux points de parcours ont ete 
rencontres et verifier si la voiture a franchi la ligne d'arrivee : 

// En cas de emplacement, bouger la voiture et verifier l'etat 
if (speed != 0) { 

moveCar(timeDiff ) ; 

centerMap() ; 

checkWaypoints() ; 

checkFinishLine() ; 

} 

} 

Que la voiture bougeou non, lechronometredoit pour sa part etre mis a jour : 
// Mettre a jour le temps et verifier si la course est terminee 
showTime( ) ; 

} 

Mouvement de la voiture 

La voiture se deplace en fonction de rotation, speed et timeDiff. La rotation est convertie en 
radians et la valeur, fournie a Math. cos et Math. sin. La position originale de la voiture est stockee 
dans carPos et le changement de position, dans dx et dy : 

public function moveCar(timeDiff :Number) { 
// Obtenir la position actuelle 

var carPos:Point = new Point(ganesprite.car.x, gamesprite.car.y) ; 
// Calculer le changement 

var carAngle: Number = ganesprite. car. rotation; 

var carAngleRadians: Number = (carAngle/360)*(2.0*Math.PI) ; 

var carMove: Number = speed*timeDiff ; 

var dx:Number = sMath.cos(carAngleRadians)*carMove; 

var dy:Number = Math.sin(carAngleRadians)*carMove; 

Pendant que nous determinons ou doit se trouver le nouvel emplacement de la voiture, nous devons 
aussi determiner le son qui doit etre joue. Si la voiture se deplace etsetrouve sur la route, il faut lire 

leson theDriveSound. 
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Nous supposerons que c'est le cas a ce stade et ajusterons la valeur de newsound a mesure que nous 
examinerons d'autres aspects de I'etat du jeu : 

// Nous supposons que nous allons utiliser le son de conduite 
var newSound: Object = theDriveSound; 

Le premier test a real iser ici consiste a voir si la voiture se trouve actuellement sur la route. Nous 
utiliserons nitTestPoint pour cela. Letroi si erne parametre dans nitTest Point nous permetde tester 
un point par rapport a la forme specifique de la route. Nous devons ajouter gamesprite.x et 
gamesprite .y a la position de la voiture, car nitTestPoint fonctionne au niveau de la scene, avec les 
positions de la scene et non au niveau du gamesprite avec les positions du gamesprite : 

// Voir si la voiture n'est PAS sur la route 
if ( ! gamesprite . road . nitTestPoint (carPos . x+dx+ganesprite . x, 
carPos.y+dy+gamesprite.y, true)) { 

Notez la presence du point d'exclamation crucial dans la I igne decode precedente. Ce ! signifie "non" 
et inverse la valeur booleenne qui le suit. Au lieu de verifier si Tempi acement de la voiture se trouve 
a I'interieur de la route, nous verifions ainsi s'il ne se trouve pas a I'interieur de la route (en d'autres 
termes, s'il se trouve en dehors). 

M aintenant que nous savons que la voiture ne se trouve pas sur la route, le test suivant doit nous 
indiquer si la voiture se trouve a tout le moins sur la bordure de la route : 

// Voir si la voiture est sur la bordure 

if (gamesprite . side . nitTest Point ( carPos . x+dx+gamesprite . x, 
carPos.y+dy+gamesprite.y, true)) { 

Si la voiture se trouve sur la bordure de la route, nous utilisonsle test unitaire tnesidesound au lieu 
de theDriveSound. Nous reduisons en outre la vitessede la voiture d'un faible pourcentage : 

// Utiliser un son specifique, reduire la vitesse 
newSound = theSideSound; 
speed *= 1 .0- .001*timeDiff ; 

Si la voiture nese trouve ni sur la route ni sursa bordure, nousutilisons tneoff roadSound en reduisant 
la vitesse d'une quantite plus importante : 

} else { 

// Utiliser son specifique, reduire la vitesse 
newSound = theOff roadSound; 
speed *= 1 .0- .005*timeDiff ; 

} 

} 
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Nous pouvons maintenant definir I' emplacement de la voiture : 

// Definir la nouvelle position de la voiture 
gamesprite.car.x = carPos.x+dx; 
gamesprite.car.y = carPos.y+dy; 

II ne nous reste plus qu'a determiner le son a lire, newsound vaut tneDriveSound, tneSideSound ou 
theof f roadSound. Si lejoueur n'est pas en train d'accelerer a cet instant, nous ne souhaitons toutefois 
pas emettre de son : 

// Si le joueur n'accelere pas, ignorer le son 
if (larrowUp && larrowDown) { 
newSound = null; 

} 

La variable newsound contientleson approprie. Si ceson estdeja lu et boucle, nous ne souhaitons ri en 
fairehormis le laisser continuer. Nous ne souhaitons reagi r que si un nouveau son doitvenir remplacer 
leson actuel. 

Si c'est le cas, nous emettons une commande drivesoundchannei.stopo afin d'annuler I'ancien 
son, puis une nouvelle commande play avec un grand nombre de boucles, pour commencer : 

// Si nouveau son, permuter 
if (newSound != currentSound) { 

if (driveSoundChannel != null) { 
driveSoundChannel.stopO ; 

} 

currentSound = newSound; 
if (currentSound != null) { 

driveSoundChannel = currentSound. play(0, 9999) ; 

} 

} 

} 

En plus de la fonction movecar, nous avons besoin delafonction centerMap, qui est identique a celle 
du jeu de conduite en vue aerienne de la premiere partie du chapitre et conserve la voiture au centre 
del'ecran. 

Verifier I'etat d'avancement 

Pour verifier ou en est lejoueur sur le circuit, nous allons examiner chacun des waypoints et voir si 
lavoitureen estproche. Pourcela, nous uti liserons la fonction Point. distance. Letableau waypoints 
contient deja des objets Point, mais nous devons en construire un a la volee avec r emplacement de 
la voiture pour effectuer la comparaison. 
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J'ai choisi une distance de 150 pourconsidererqu'un pointdeparcoursestatteint. C 'est suffisant pour 
que la voiture ne puisse manquer un point de parcours au milieu de la route meme si el I e le franchit 
en passant a cote. II est essentiel que cette distance soit suffisamment grande pour que le joueur ne 
puisse passer a cote d'un point de parcours sans qu'i I soit comptabilise. Sanscela, il ne pourrait finir 
la course et ne comprendrait pas pourquoi : 

// Verifier si la voiture est assez proche d'un point de parcours 
public function checkWaypoints( ) { 

for(var i:int=waypoints.length-1 ;i>=0;i- -) { 
if (Point. distance(waypoints[i] , 
new Point(gamesprite.car.x, gamesprite.car.y) ) < 150) { 
waypoints. splice (i,1 ) ; 

} 

} 

} 

Lorsqu'unwaypoint est rencontre, il est suppri me du tableau. Lorsquele tableau est vide, noussavons 
que tous les points de parcours ont ete franchis. 

C'estexactementcequeverifieen premier checkFinishLine. Si I e tableau waypoints contient encore 
des elements, lejoueur n'est pas pret a franchir la ligne d'arrivee : 

// Voir si la ligne d'arrivee est franchie 
public function checkFinishLine( ) { 

// Uniquement si tous les points de parcours ont ete atteints 
if (waypoints. length > 0) return; 

A I'inverse, si lejoueur a atteint tousles points de parcours, nous pouvonssupposerqu'il approchede 
la ligne d'arrivee. Nous verifions la valeur y de la voiture pour voir s'il a passe la valeur y du clip 
finish. Si c'estlecas, lejoueur a termine la course: 

if (gamesprite.car.y < gamesprite. finish. y) { 
endGame( ) ; 

} 

} 



Si vous changez la carte et repositionnez la ligne d'arrivee, soyez attentif lorsque vous veri- 
fiez si la voiture a passe finish. Par exemple, si la voiture approche de finish en venant de la 
gauche, vous devrez verifier cette fois la valeur x de la voiture pour voir si el I e est superleure 
a cell e de finish. 
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Compte a rebours et chronometre 

Si lechronometredecejeu est tres proche de eel ui dujeudeconduiteen vueaerienne, il estaccompagne 
d'un autre chronometre qui, pour sa part, effectue un compte a rebours avant le depart de la course. 

Si gameMode vaut "wait", la course n'a pas encore demarre. Nous testons gameTime pour voir si sa 
valeur est negative. Si c'estlecas, gameTimero n'a pas encore rattrape I e del ai de3 secondes que nous 
avons cree lorsque nous avons defini gamestartTime en lui attribuant la valeur gemmer ( )+3000. 

A u lieu d'afficher I e temps dans le champ timeDispiay, nous I'afficherons dans I e champ countdown. 
Nous I'afficherons cependant sous forme d'un nombre de secondes arrondi : 3, puis 2, puis 1. Nous 
lironsaussi leson theReadysetsound a chaque fois que ce nombre change. La Figure 12.10 presente 
ce chronometre de compte a rebours au debut du jeu. 

// Mettre a jour le temps affiche 
public function showTime() { 

var ganeTine:int = getTiner() -gameStartTine; 

// En node Attente, afficher le chronometre du compte a rebours 
if (gameMode == "wait") { 
if (gameTime < 0) { 
// Afficher 3, 2, 1 

var newNum:String = String(Math .abs(Math.floor(gameTime/1000) ) ) ; 
if (countdown. text != newNum) { 

countdown. text = newNum; 

playSound(theReadysetSound) ; 

} 



Figure 12.10 

U n nombre au centre de I'ecran 
indique le temps restant avant le 
debut de la course. 
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Lorsque gameTime atteint 0, nous changeons gameMode et supprimons le nombrede countdown. Nous 
lisons egalement tneGoSound : 

} else { 

// Compte a rebours termine, passer en mode Course 
gameMode = "race" ; 
countdown. text = ""; 
playSound(theGoSound) ; 

} 

Pour le reste de la course, nous afficherons le temps dans le champ timeDispiay. La fonction 
ciockTime est exactement la meme que eel I e utilises precedemment dans ce chapitre : 

// Afficher le temps 
} else { 

timeDispiay. text = clockTime(gameTime) ; 

} 

} 

Fin de partie 

L orsquelapartiese termine, lenettoy ageafaireest pi us importantqued'habitude.LedriveSoundChannei 
doit arreter de lire les sons. N ous declencherons cependant aussi le son tneBrakeSound a ce point. 

Ensuite, nous supprimons tous les ecouteurs et passons a I' image gameover : 

// Partie terminee, supprimer les ecouteurs 
public function endGame() { 

driveSoundChannel.stop( ) ; 

playSound(theBrakestopSound) ; 

this. removeEventListener(Event . ENTER_FRAME,gameLoop) ; 
stage. removeEventListener(KeyboardEvent .KEY_D0WN, keyDownFunction) ; 
stage. removeEvent Listener (KeyboardEvent . KEY_UP, keyUpFunction) ; 
gotoAndStop( "gameover" ) ; 

} 

U nefois que nous nous trouvons a I 'image gameover, nous affichons I e score final exactement comme 
avec le jeu de conduite en vue aerienne. Dans le cas present, nous souhaitons cependant conserver le 
gamesprite visible. Dans le scenario principal, il figure a la fois dans les images piayet gameover de 
sorte qu'il reste present lorsque nous passons a I' image gameover. 

Lafonction showFinaiwiessageestidentiqueacelledujeu precedent. Inutilede revenirici dessus. Le 
scenario principal inclut egalement le meme code dans I'image gameover. 
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Modifier le jeu 

Le circuit decejeu estassez simple : il s' agitd'une piste devitesse tout cequ'i I y a de plus classique. 
Vous pouvez cependant en creer de bien plus complexes avec des tournants et des chicanes. 



L'astuce pour creer le clip de la route et celui de la bordure consiste a ne se soucier d'abord 
que du clip road (celui de la route). Une fois ce clip termine, creez-en une copie et appelez 
cette copie side. Ensuite, selectionnez la forme a I'interieur du clip et choisissez M odifica- 
tion > Forme > Etendre le remplissage. Etendez la piste d'environ 50 pixels. Vous creerez 
ainsi une copie de la route plus epaisse qui correspond exactement a la route d'origine. 



Vous pouvez egalement joncher la route d'obstacles. Des taches d'huile pourraient ainsi ralentir la 
voiture. Ellespourraientetregereesdela mememanierequeles points deparcours, maisen definissant 
une distance tres reduite pour considerer qu'elles aient ete touchees. La vitesse de la voiture pourrait 
alorsetre affectee. 

II est aussi courant dans ce type de jeu de disposer une portion de terrain rugueux au milieu dela 
route. Vous pourriez lefaireen percant un trou dans la forme du clip road eten y I ai ssant transparai tre 

leclip side. 

Parmi les autres ameliorations possibles, I'une sera de placer les points de parcours dans un ordre 
specifique. Pour I'instant, le jeu se termine lorsque le joueur atteint tous les points de parcours et 
franchit la ligne d'arrivee. L'ordre dans lequel ces points sont atteints n'importe pas. Techniquement, 
il serait done parfaitement possible pour le joueur de rouler en sens inverse sur le circuit, de toucher 
tous I es points de parcours etdegagner des qu'i I atteint le dernier point de parcours puisqu'il setrouve 
deja au-dela de la ligne d'arrivee. L e joueur n'obtiendrait pas pour autant un meilleur temps, car il faut 
en perdre beaucoup pour effectuer un demi-tour. 

Vous pourriez ordonner les points de parcours en leur donnant des noms comme "waypointo", 
"waypointi ", etainsi de suite. Vous pourriez des lors examiner les points deparcours nominativement 
au lieu de le faire en fonction de leur type, en verifiant si la voiture se trouve aupres de I'un d'entre 
eux et sans les considerer tous a la fois. 

Cejeu de course indiquelechemin que nous avons nous-memes parcouru. Nousavons commence au 
Chapitre 3 par un jeu de M emory, unesorte dejeu de puzzle qui utilisait les dies desouris en entree 
et testait la memoire du joueur. Nous nous retrouvons maintenant avec un veritable jeu d'action qui 
utilise le clavier et teste la dexterite du joueur. 

Voila qui illustre bien la grande variete des jeux qui peuvent etre crees avec Flash. Si vous etudiez 
chacun deschapitresdecelivre, vousdevez done etre capable de creer un grand nombredejeux. 

L' etapesuivante est entre vos mains. M odifiez les jeux que vous avez crees dans ce I ivreou commencez 
a creer vos propresjeux en realisant vos propres conceptions. Dans un cas comme dans I' autre, visitez 
http://flashgameu.com pour en apprendre plus. 
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GIF 212 

JPEG 218 

JPG 93,212 

PNG 212 

publication 37 

QuickTime 37 

TextFormat 55, 143, 365 

XML 78,361 
Formes 52 
fromCharCode 62 
function 16 

G 



gameMode 281 
gameScore 268 
getChildAt 352 
getLocal 79 

getTimer 69,86,119,172 
GIF 212 

gotoAndStop 67, 115, 275 
graphics 52 
Gravite 70,403 

limiter la vitesse 413 



Grille 

Match Three 305 
M emory 96 
puzzle 224 

H 



Hangman 338 
Hello World 9 
Heros 396 

createHero 406 
hitTestObject 75,418 
hitTestPoint 75 
homeLoc 221 
HTML 39 

CSS 329 

EMBED 77 

OBJECT 77 

passer des valeurs 77 
htmlText 57 

I 



I cones 271 

if 30, 63, 108, 125, 186, 204, 207 
image 

chargement 220, 234 
cle 11 

decouper 214, 221, 234 

quiz 385 
import 104, 141 
Importation 15, 104 

clip 46 

proteger contre 38 
sons 128 

trouver les classes requises 141 
indexOf 325 
Indices 378 
Instruction 

conditionnelle 30 

for 96 

import 104 

stop 83 
intersects 208 
isBuffering 83 
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J 

Jeu 

A ir Raid 176 

A i r Raid 1 1 255 

cartes 428 

casse-brique 195 

casual games 292 

conduite en vue aerienne 428 

course 451 

deduction 151 

de plate-forme 394 

de simulation 452 

Mastermind 152 

M emory 92 

naval s 176 

Newton's Nightmare 301 
pendu 336 

proteger contre le vol 88 

quiz 358 

Simon 138 

Space Rocks 262 

supprimer les elements 166 
Joueur 

interactions 61 

mort 419 

munitions 194 
Joyaux 398 
JPEG 218 
JPG 93,212 

K 



KEY DOWN 62 
KEY'UP 62,65 
keyCode 183, 275 
key DownF unction 191 
key UpF unction 191 

L 



lineStyle 59 
Lists 

beingD ragged 238 
d'affichage 17,42,47,61 
puzzleObjects 226 



loadBitmap 220 
Loader 212 
Loader Info 78 
loadingDone 214 
loadProgress 83 
localX 75 

lookForMatches 306, 314 

M 



makeB ricks 200 
makeSwap 308 
Mastermind 152 
Match Three 292 

correspondances 312 

fonctionnalites 302 

interaction du joueur 307 
Math 246,249 
M emoire 

liberer 42, 179, 297 

ramasse-miettes 166 
Memory 92 
M inuteurs\foirTimer 
M ots-cles 

const 100 

function 16 

private 32, 100 

public 16 

return 209 

static 100 

this 52 

var 28 

void 96 
Motsmeles 340 
MOUSE DOWN 74,234,345 
MOUSE'OVER 345 
MOUSE JJP 74 
mouseEnabled 81 
mouseX 61,254 
M ouvement 

aleatoire 224 

asteroid es 282 

avions volants 176 

freinage 457 

Match Three 310 

missiles 284 



personnages 412 
puzzle 237 
puzzle coulissant 219 
raquette 203 
rebonds 204 
rotation 246,266 
sprites 72 

touches flechees 181, 250 

voiture 443, 458 
moveBall 203 
moveCar 250,444 
moveCursor 81 
movePiecelnDirection 228 
movePlane 178 
movieBytesLoaded 84 
movieBytesTotal 84 
MovieClip 115 
MovingCar 249 
M P3 82, 130, 144 
multiline 65 
Munitions 194 
M urs 395, 415 

N 



navigateToURL 89 
newRockWave 282 
Newton's Nightmare 301 
Nintendo 394 
N ombre 

aleatoire 84, 151 

d'i mages 11 

octets 84 

operations 29 

types 97 
numChildren 61, 110 

0 



OBJECT, balise 77 
Object, type 136 
Objet 

d'affichage 17 
graphics 52 
Loaderlnfo 78 
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Objet (Suite) 

Point 204 

Rectangle 204 

SimpleButton 51 

TextField 13,54 

TextFormat 55 

Timer 68 

URL Loader 78 

URL Request 78 

xmlLoaded 79 
Opacite Voir Transparence 
Operateur 

ajout 118 

comparaison 30, 325 
is 402 

numerique 29 
P 



Panneau 

Actions 11 

Bibliotheque 19, 298 

Console de debogage 35 

Proprietes 16, 20 

Sortie 9 
Paquetages 

accolades 150 

declaration 96 

importer 15 
Parametres 

desecurite 41 

publication 36 
Pendujeu du 336 
Performances 

compression des sons 130 

definir le type 225 

liberer la memoire 179 
Permutation 310 
placeLetters 346 
placeTrash 439 
play 82 
playSound 129 
PNG 212 
Point 

d 'arret 34 

deparcours 460 



explosion 292 

objet 204 
PointBurst 397,420 
Polices 

Courier 338 

symboles 298 
pop 149 
private 32, 100 
Profondeur 61 
Programmation 

constantes 99 

de haut en bas 313 
Proprietes 16 

alpha 53,62, 138,278,294,297 

audio 82 

buttonM ode 49, 130, 145, 162 

bytesLoaded 83 

bytesTotal 83 

currentCount 68 

currentFrame 67 

currentLoc 221 

currentTarget 105 

definition antici pee 42 

des symboles 94 

homeLoc 221 

htmlText 57 

isBuffering 83 

mouseEnabled 81 

mouseX 61, 254 

multiline 65 

numChildren 61, 110 

rotation 246,256 

scaleX 126,417 

selectable 55, 143 

stageWidth 87 

stylesheet 57 

visible 264 
public, mot-cle 16 
Publication 36 

chemin de classe 299 

formats 37 

parametres de compression 130 
parametres Flash 37 
parametres HTM L 39 
push 101 



Puzzle 

classique 231 
connexion des pieces 241 
coulissant 217 
melange des pieces 223,236 

Q 



QuickTime 37 
Quiz 358 

Deluxe 375 
images 385 
indices 378 
temps limite 376 

R 



Raccourcis clavier 43 
Ramasse-miettes 166 
random 84, 102 
Rechercher 22 
Rectangle 204 
removeBullet 193 
removeChild 166 
removePlane 179, 192 
return 149,209 
rocks 280 
Rotation 

angle 47, 246 

cadence d'i mages 250 

decomposer la tache 25 

objets ronds 284 

Vitesse 266,457 
rotation 47,246,256 

s 



scaleX 48, 125, 126, 178, 297, 417 
Scenario 20,401 
Scene 18 

propriete stageWidth 87 
Score 122, 268 

explosion de points 292 
indicateurs 449 
Match Three 321 
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objets 421 
points 421 

systeme complexe 382 

voiture 433 
search 326 
Securite 

parametres 41 

vol des jeux 88 
selectable 55, 143 
setChildlndex 61, 80 
shift 149 
shiftKey 63 
showG ameScore 192 
shuffle 236 
shuffleAnswers 388 
shufflePuzzlePieces 224 
Simon 138 

arriere-plan 152 
SimpleButton 51 
Simulation 452 
Sin 246 
Sol 395,415 
Sons 128, 454 

charger 144 

compression 130 

isBuffering 83 

lire 81,460 

MP3 144 

playSound 129 

proprieties audio 82 
Sortie, panneau 9 
Souris 61, 345 

die 349 

localX 75 

MOUSE_DOWN 74 

relachement 350 
Space Rocks 262 
splice 209 
Sprite 

animer 66 

creer des groupes 58 
current! oc 221 
definir la profondeur 61 
definition 17 
deplacer 72 
faireglisser 74 
homeLoc 221 



lettres 344 
niveaux 233 

propriete mouseEnabled 81 

scaleX 417 
stageWidth 87 
start 68 

startG ameL evel 405 
startPaddleBall 200 
startTopDownDrive 437 
startWordSearch 343 
static 100 
Stockage 358 
stop 83 

Strategiedeprogrammation 24,140 

programmation de haut en bas 
313 
String 324 
stylesheet 57 
substr 325 
Suppression 

elements du jeu 166 

parcours a reculons 190 
Survol (bouton) 49, 81 
SWF 19,88 
switch 227 
Symboles 

polices 298 

proprietes 94 

T 



Tableau 134 

convertir en chatnes 328 
copier avec concat 147 
mel anger 85 
pop 149 
rocks 280 
shift 149 

shuffleAnswers 388 

types 135 
Tabulation 382 
Temps 

chronometre 119, 376, 433, 448, 
462 

clockTime 121 
limiter 127, 376 



Test 

cadence d'i mages 43 
debogage 22,27,32,34 
sur serveur 43 
Texte 54 
anime 334 
chatnes 324 
default! extFormat 332 
entree utilisateur 64 
fichier 78 
jeu de quiz 363 
jeu du pendu 337 
lie 56 

mots meles 340 

tabulation 382 
TextField 13,54,159,329 
TextFormat 55, 143, 329 

dupliquer 367 
this 52 

Timer 68,127,189,228,377 

currentCount 68 

demarrer 68 

getTimer 69, 172 
TIMERCOMPLETE 127,229,279 
toLowerCase 325 
Touches flechees 267 
trace 9, 86, 360 

Transparence 53, 62, 138, 278, 297 
Typage 42 

u 



URLLoader 78 
URL Request 78,214 

V -w 



validMove 224 
var 28 

Variable 28, 99 

definition combinee 188 
dxetdy 173 
externe 77 
incremental e 27 
noms descriptifs 26 
typage 42 
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Velocite 70, 199, 267 
Vies 419 
visible 264 
Vitesse 266, 457 

cadence d'images 250 
limiter 413 
missiles 284 
void 96 



Voitures 428 

braquage 457 
circuit 451 
collisions 442 
controle 431 
freinage 457 
mouvement 443 
moveCar 444 
piloter 248 

points de parcours 460 
rotation 246 
while 31, 151, 306, 439 



X -z 



XML 78,89,358 

attributs 360 
importer 361 
xmlLoaded 79,361 
Zone reactive 390 



Le Programmeur 



Memory et jeux de deduction 
Jeux de tir 
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